OnSubmit函数没有更新react中的react钩子状态变量

Question

在这里，我试图创建一个食谱应用程序，从名为Edamam的网站获取其数据.我使用React UseEffect来重新渲染我的页面，每次用户点击提交按钮。即，当查询更新时，页面将重新呈现。

创建状态和使用效果

const[recipes,setRecipes]=useState([]);
const[search,setSearch]=useState("");
const[query,setQuery]=useState('chicken');
useEffect(()=>{
getRecipes();
},[query]);

从API获取数据

const getRecipes = 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();
setRecipes(data.hits);
console.log(data.hits);
};

事件处理函数

const UpdateSearch= (e) =>{
setSearch(e.target.value);
}
const GetSearch= (e) =>{
e.preventDefaut();
setQuery(search);
setSearch("");
};

JSX PART

return(
<div className="App">
<form onSubmit={GetSearch} className="search-form">
<input
type="text" 
className="search-bar" 
value={search} 
onChange={UpdateSearch}/>
<button  type="submit" className="search-button" > Search </button>
</form>
{query}
{recipes.map(recipe=>(
<Recipe/> // a different component
))}
</div>
)
}
export default App;

Answer 1

尝试用e.preventDefault()代替e.preventDefaut()