将异步函数放入 useEffect 后出现错误

Question

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

react-dom.development.js:21857 Uncaught TypeError: destroy 不是函数

和

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

  function App() {
  const [foods, setFoods] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => getResponse());
  const getResponse = async () => {
    const response = await fetch(sampleRequest);
    const data = await response.json();
    setFoods(data.hits);
  };
  let query = "Tomato";
  let sampleRequest = `https://api.edamam.com/search?q=${query}&app_id=${"1811484f"}&app_key=${"9cac93361efc99e2ebfbb8a453882af8"}`;

  return (
    <div className="App">
      <div className="main">
        <div className="navbars">
          {" "}
          <Navbars></Navbars>
        </div>
        <div className="listings">
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
        </div>
        <div className="footer">
          <h5>Made By YoYo Strangler in 2019</h5>
        </div>
      </div>
    </div>
  );
}

export default App;

Answer 1

您正在返回getResponse()从useEffect函数调用的结果。如果你从 返回任何东西useEffect，它必须是一个函数。将您的代码更改为此应该可以解决它，因为您不再从该useEffect函数返回任何内容。

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

该useEffect清理功能

如果你从useEffect钩子函数返回任何东西，它必须是一个清理函数。此函数将在组件卸载时运行。这可以被认为大致相当于componentWillUnmount类组件中的生命周期方法。

useEffect(() => { 
  doSomething();

  return () => {
    console.log("This will be logged on unmount");
  }
});

Answer 2

我像这样使用了IIFE，它成功了！-

以前是这样的——

useEffect(async ()=>{
    const awesome_value = await AsyncStorage.getItem('awesome')
    setAwesome(awesome_value)
},[]);

现在我把它改成了这样——

useEffect( ()=>{
   (async() => {const awesome_value = await AsyncStorage.getItem('awesome')
   setAwesome(awesome_value)} ) ();
},[]);

Answer 3

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

相反，您可以像这样使用 IIFE（立即调用的函数表达式）包装异步函数，因此不会返回任何内容并将其useEffect用作清理函数：

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

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

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