Question

我正在尝试使用钩子获取数据，并且得到了意外的结果。

当我尝试使用带有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();
})

Answer 4

在 simple solution

使用挂钩获取数据时发生意外行为

4 个答案: