如何在 React 的 useEffect 中使用异步函数

useEffect 通常是 React 中进行数据获取的地方。数据获取意味着使用异步函数，而在 useEffect 中使用它们可能并不像你想象的那样直截了当。继续阅读以了解更多！

错误的方式

有一种在 useEffect 中进行数据获取的错误方式。如果你编写以下代码，你的 linter 会对你大喊大叫！
-------------------------------------------
| 我是说你确实在使用 linter 吧？？ |
-------------------------------------------

// ❌ 不要这样做
useEffect(async () => {
const data = await fetchData();
}, [fetchData])

这里的问题是 useEffect 的第一个参数应该是一个返回 undefined 或函数（用于清理副作用）的函数。但是异步函数返回的是一个 Promise，它不能被当作函数调用！这根本不是 useEffect hook 对其第一个参数的期望。

那么如何在 useEffect 中使用异步代码呢？

通常的解决方案是直接在 useEffect 内部编写数据获取代码，如下所示：

useEffect(() => {
// 声明数据获取函数
const fetchData = async () => {
const data = await fetch('https://yourapi.com');
}
// 调用函数
fetchData() // 确保捕获任何错误
.catch(console.error);
}, [])

总结：你不能直接使 useEffect 异步，因为它期望一个同步的清理返回。相反，请在 effect 块内声明并调用你的异步函数。

我是 Nmesoma Ononogbo，一名软件工程师，致力于构建创新解决方案，帮助企业赋能并创造卓越的用户体验，同时不断突破现代技术可能性的边界。