使用钩子获取数据时的意外行为答案

【问题标题】：Unexpected behavior when fetching data with hooks使用钩子获取数据时的意外行为
【发布时间】：2019-12-27 21:36:34
【问题描述】：

我正在尝试使用钩子获取数据，但我得到了意想不到的结果。

当我尝试使用带有 useEffect 的异步回调时，它会抛出一个警告说这是不好的做法，即使代码有效（在下面的附加示例中注释掉）

但是当我尝试在 useEffect 中声明一个异步函数时，它不起作用（示例如下）

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

【问题讨论】：

标签： reactjs axios react-hooks

【解决方案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();
  }, []);

【讨论】：

【解决方案2】：

你可以这样修复它：

  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();
  }, []);

https://codesandbox.io/s/cocky-water-c0w9i

您的代码中的问题在于：

  const result = fetchData();
  setData(result.data);

这里的 fetchData 是异步的，将返回一个承诺而不是实际结果，因此 result.data 是未定义的

【讨论】：

感谢您的回答！如果我想在组件渲染之前在效果内对数据做一些事情怎么办？我应该只使用类组件吗？

【解决方案3】：

传递给 useEffect 的回调必须返回清理回调或未定义，当您将函数标记为异步时，它会隐式返回 Promise

您可以在 useEffect 回调中创建一个可以标记为异步的函数

React.useEffect(() => {
 async function fetchData() {
  // write your request
 }
 fetchData();
})

【讨论】：

【解决方案4】：

在 simple solution

【讨论】：