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

Question

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

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

但是当我尝试在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

在 简单的解决方案