Question

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

2019-08-22

70

reactjs axios react-hooks

我尝试使用钩子获取数据，但得到了意外结果。

当我尝试将异步回调与 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();
  }, []);

Answer 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 未定义

Answer 3

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

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

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