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

Posted 2023-02-22

【中文标题】使用钩子获取数据时的意外行为

【英文标题】：Unexpected behavior when fetching data with hooks

【发布时间】：2019-12-27 21:36:34

【问题描述】：

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

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

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

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

【参考方案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