reactjs - 使用钩子(Hook)获取数据时出现意外行为

Question

我正在尝试使用钩子(Hook)获取数据，但得到了意外的结果。

当我尝试将异步回调与 useEffect 一起使用时，它会抛出警告，指出这是不好的做法，即使代码有效(在下面的附加示例中注释掉)

但是当我尝试在 useEffect 中声明异步函数时，它不起作用(下面的示例)

我错过了什么？ https://codesandbox.io/s/mystifying-aryabhata-glqwz?fontsize=14

Answer 1

您应该将所有效果逻辑放入 fetchData() 中，并在 useEffect 中单独调用它:

useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await axios("https://hn.algolia.com/api/v1/search?query=redux");
        setData(result.data);
      } catch (e) {
        console.log(e);
      }
    }
    fetchData();
  }, []);