如何解决OnSubmit 函数不会更新 React 中的 React 钩子状态变量
在这里,我正在尝试创建一个食谱应用程序,该应用程序从名为 Edamam 的站点获取其数据。 每次用户单击提交按钮时,我都使用 React UseEffect 重新呈现我的页面。 即当 query 更新时页面将重新呈现。
国家的创造和使用效果
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 部分
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;
解决方法
尝试将 e.preventDefaut()
替换为 e.preventDefault()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。