在useEffect之外定义异步函数，不要将其包含在依赖数组中

Question

你好，我需要帮助澄清以下内容:

这是关于只做一次API调用，当组件被挂载。

我知道我们绝不能在React中做这样的事情:

案例1:

useEffect(async () => {
const response = await callAPI();
setData(response.data);
}, []);

我知道案例1的问题是useEffect期待一个函数而不是一个承诺(因为异步函数总是promise类型)，我也知道useEffects的返回回调不会正常工作。

我也知道这两种可能的解决方案是有效的:

案例2:

useEffect(()=> {
const fetchData = async () => {
const response = await callAPI();
setData(response.data);
}
fetchData();
}, []);

案例3:

const fetchData = useCallback(async () => {
const response = await callAPI();
setData(response.data);
},[]);
useEffect(()=> {
fetchData();
}, [fetchData]);

我这里的主要问题是那么情况4和情况5呢，它们有什么问题?在美国，我有很多项目都是这样使用它的。谢谢。

案例4:

const fetchData = async () => {
const response = await callAPI();
setData(response.data);
}
useEffect(()=> {
fetchData();
}, []);

案例5:

const fetchData = useCallback(async () => {
const response = await callAPI();
setData(response.data);
},[]);
useEffect(()=> {
fetchData();
}, []);

顺便说一下，我知道，在情况4 fetchData函数将被重新定义在每次重新渲染，有时这不是一个大问题，特别是如果函数不添加在useEffect的依赖数组，因为避免调用fetchData多次。

Answer 1

除了案例5中多余的useCallback之外，它们没有任何问题。此外，检查器可能不喜欢你调用的函数的效果不在依赖项数组中，但这是检查启发式的失败，而不是实际问题。

还有另一种模式可以避免这两种情况:在组件之外定义函数

async function fetchData() {
const response = await callAPI();
return response.data;
}

然后直接使用

useEffect(() => {
fetchData().then(setData);
}, [])

Answer 2

案例4和案例5简而言之，它们的返回值是一个承诺它们创建的结果与第1例

相同我个人喜欢这样使用生活:

useEffect(() => {
(async () => {
const res = await fetch(`${URL}people`)
const data = await res.json()
setPepoleArr(data)
})()
}, [])

一旦添加了async，就可以这样考虑函数返回一个promise，问题是她在哪里返回他

Answer 3

当你想从服务器获取请求并使用async &等待，需要几秒钟的时间才能将数据提供给您。当你同时setState时，它不会给你数据

const fetchData = async () => {
const response = await callAPI();
if (response) setData(response.data);
//enter code here
}
useEffect(()=> {
fetchData();
}, []);