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

Question

我正在尝试使用Edamam API构建这个React Food应用程序。React App在默认情况下获取数据，我将其状态设置为"；鸡肉；但当我通过表单提交值时，它不会获取数据。提交表单时，我正在使用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]放进去。或者你可以直接在handleSubmit()中调用getRecipe()

Answer 2

我认为这可能是因为useEffect函数没有监听query状态的变化。

尝试将状态query添加到useEffect的依赖数组中，如下所示：

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