表单提交不适用于 React Food 应用程序

Question

我正在尝试使用 Edamam API 构建这个 React Food 应用程序。 React 应用程序默认获取数据，我将状态设置为“Chicken”，但是当我通过表单提交值时，它不获取数据。我正在使用 useEffect 在提交表单时呈现我的页面。

状态和使用效果

import React,{useEffect, useState} from 'react'
import './App.css';
import Recipe from "./Recipe"

function App() {

  const APP_ID = "personalId";
  const APP_KEY = "personalKey";

  const [recipeData, setrecipeData] = useState([])

  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("Chicken");

  useEffect( () => {
    getRecipe();
  },[] )

获取API

  const getRecipe = async () => {
    const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`)
    const data = await response.json();
    setrecipeData(data.hits)
    console.log(data.hits);
  }

事件处理

  function handleChange(event){
    
    console.log(event.target.value);
    setSearch(event.target.value);
    
  }

  function handleSubmit(event){
    event.preventDefault();
    setQuery(search);
   
  }

组件

  return (
    <div className="App">
      <h1>Recipe App</h1>
      <form onSubmit={handleSubmit} className="search-form">
        <input className="search-bar" type='text' onChange={handleChange} value={search}/>
        <button className="search-button" type="submit">Search</button>
      </form>
      {recipeData.map( eachRecipe =>(
        <Recipe
          key = {eachRecipe.recipe.label}
          title = {eachRecipe.recipe.label}
          calorie = {eachRecipe.recipe.calories}
        /> )) 
        }

    </div>
  );
}

export default App;

Answer 1

您的

uesEffect

的依赖数组是空的，因此它仅在第一次渲染时渲染，因为它永远不会改变。我想你的意思是把

[query]

放进去。或者，您可以直接在

getRecipe()

 中调用 

handleSubmit()

Answer 2

我认为这可能是因为你的

useEffect

函数没有监听

query

状态的变化。

尝试将您的状态

query

添加到

useEffect

的依赖数组中，如下所示：

useEffect( () => {
    getRecipe();
  },[query])

Answer 3

🔴我编写的这个应用程序可以帮助您了解国际甚至家庭食品食谱🥣👇🏻❣️

https://play.google.com/store/apps/details?id=com.fd.food_recipe0