Reactjs 将异步函数置于useffect后出现错误

在useEffect函数中，如果我只提到getResults函数变量，应用程序不会崩溃。但是，当我在下面的代码中调用它时，会出现以下错误：

react dom.development.js:21857未捕获类型错误：销毁不是 作用

及

考虑向树中添加错误边界以自定义错误处理行为

函数应用程序（）{
const[foods，setFoods]=useState（[]）；
const[isLoaded，setIsLoaded]=useState（false）；
useEffect（（）=>getResponse（））；
const getResponse=async（）=>{
const response=等待获取（sampleRequest）；
const data=wait response.json（）；
setFoods（data.hits）；
};
让query=“番茄”；
设采样器请求=`https://api.edamam.com/search?q=${query}&app_id=${“1811484f”}&app_key=${“9cac93361efc99e2ebfbb8a453882af8”}；
返回(
{" "}
由YoYo Strangler于2019年制造
);
}
导出默认应用程序；

您正在从

useffect

函数返回调用

getResponse（）

的结果。如果从

useffect

返回任何内容，则它必须是一个函数。将代码更改为此应该可以修复它，因为您不再从

useffect

函数返回任何内容

useffect（（）=>{
getResponse（）；
});

---

useffect

清除功能 如果从

useffect

hook函数返回任何内容，则它必须是一个清理函数。此函数将在组件卸载时运行。这大致相当于类组件中的

componentWillUnmount

lifecycle方法

useffect（（）=>{
doSomething（）；
return（）=>{
log（“这将在卸载时被记录”）；
}
});

异步函数实际上只是承诺的语法糖，因此当您调用异步函数时，它返回的是承诺

相反，您可以像这样用IIFE（立即调用的函数表达式）包装异步函数，这样就不会将任何内容返回到

useffect

并用作清理函数：

useEffect(() => { 
  (async () => getResponse())();
});

编辑：或者正如@json在下面的评论中指出的那样。只是：

useEffect(() => { getResponse() });

---

非常感谢你。成功了。那么，本质上，它周围的两个括号{}造成了差异？你能给我一些关键词或短语吗？我可以在谷歌上搜索并阅读更多关于这方面的信息吗？@iraklithigladze是的，箭头函数的“隐式返回”。还要查看useEffect是如何工作的以及从中返回了什么。很高兴它成功了！值得注意的是，虽然这个解决方案确实有效，但IIFE与之无关，它周围的大括号抑制了隐式返回值，这就是它有效的原因。

useEffect(() => { getResponse() });