你好,我需要帮助澄清以下内容:
这是关于只做一次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多次。
除了案例5中多余的useCallback
之外,它们没有任何问题。此外,检查器可能不喜欢你调用的函数的效果不在依赖项数组中,但这是检查启发式的失败,而不是实际问题。
async function fetchData() {
const response = await callAPI();
return response.data;
}
然后直接使用
useEffect(() => {
fetchData().then(setData);
}, [])
案例4和案例5简而言之,它们的返回值是一个承诺它们创建的结果与第1例
相同我个人喜欢这样使用生活:
useEffect(() => {
(async () => {
const res = await fetch(`${URL}people`)
const data = await res.json()
setPepoleArr(data)
})()
}, [])
一旦添加了async,就可以这样考虑函数返回一个promise,问题是她在哪里返回他
当你想从服务器获取请求并使用async &等待,需要几秒钟的时间才能将数据提供给您。当你同时setState时,它不会给你数据
const fetchData = async () => {
const response = await callAPI();
if (response) setData(response.data);
//enter code here
}
useEffect(()=> {
fetchData();
}, []);