1. 首页
  2. 问题
  3. 我在使用Async函数后出现错误
小编典典

我在使用Async函数后出现错误

reactjs

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

react-dom.development.js：21857未捕获的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;

阅读 212

收藏
2020-07-22

共1个答案

小编典典

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

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

该useEffect清理功能

如果从useEffecthook函数返回任何内容，则它必须是 cleanup函数
。卸载组件时将运行此功能。可以认为这componentWillUnmount与类组件中的生命周期方法大致等效。

useEffect(() => { 
  doSomething();

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