Question

在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;

Answer 1

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

相反，您可以像这样用IIFE（立即调用的函数表达式）包装异步函数，因此没有任何内容返回到import os import json items = [] for root, dirs, files in os.walk(".", topdown=True): items.append({'root': root, 'label': dirs, 'files': files}) print(json.dumps(items))并用作清理函数：

useEffect

编辑：或如@json在下面的注释中指出。只是：

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

Answer 2

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

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

Answer 3

上述简单代码导致您的应用程序崩溃的原因是 useEffect 挂钩、async 函数和速记箭头函数语法的工作方式。

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

在 JavaScript 中，标有 async 关键字的函数可以使用 await 功能，该功能允许开发人员在等待异步任务完成时暂停函数的执行。异步函数也总是返回一个 Promise；如果函数还没有返回一个，则返回值会自动包装在一个 Promise 中。

最后，简写箭头函数语法允许开发人员省略函数体周围的花括号，这对于简单的单行代码很有用。函数体的值自动成为箭头函数的返回值，不需要 return 关键字。此功能称为隐式返回。

现在，这些花絮是如何导致如此神秘的错误的？简单的说，getResponse 的值，是一个 Promise，在 useEffect 钩子中变成了箭头函数的返回值。还记得 useEffect 钩子期望返回一个清理函数吗？ Promise 不是函数。所以 React 会出错并产生错误。

要修复您的应用，请更改 useEffect 箭头函数以添加花括号并删除隐式返回，如下所示：

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

现在，useEffect 钩子中的箭头函数返回 undefined，这是可以接受的，并且告诉 React 不需要清理函数。这将解决问题，但如果发生这种情况时 React 给出更有用的错误消息，那就太好了！

我将异步功能放入useEffect

3 个答案: