当我尝试处理来自api的数据时，请使用它进行渲染，但是由于处理功能不等待提取功能，我总是会遇到异步问题。
const [fetchData1, setData1] = useState([]);
const [fetchData1, setData2] = useState([]);
const [processedData, setProcessedData] = useState([]);
useEffect(() => {
const getData1 = async () => {
//get data1 using axios
//setData1(response)
}
const getData2 = async () => {
//get data2 using axios
//setData2(response)
}
getData1();
getData2();
setProcessedData(processData(fetchData1, fetchData2));
}, [])
const processData = (data1, data2) => {
//process two data
//return data;
}
即使我尝试将两个获取函数和流程函数包装在异步函数中，但问题仍然相同。
(async () => {
await getData1();
await getData2();
setProcessedData(processData(fetchData1, fetchData2));
})
读你的问题，据我可以告诉你不需要fetchData1和fetchData2你只想processedData。当前代码的问题在于，它使用的默认值，fetchData1并且fetchData2在调用时setProcessedData，没有使用axios的结果。
等待两个诺言达成并使用它们的结果。看评论：
const [processedData, setProcessedData] = useState([]);
useEffect(() => {
const getData1 = async () => {
//get data1 using axios
//setData1(response)
};
const getData2 = async () => {
//get data2 using axios
//setData2(response)
};
// *** Wait for both promises to be fulfilled
Promise.all(
getData1(),
getData2()
).then([data1, data2]) => { // Get those results into parameters
// *** Use the parameter values
setProcessedData(processData(data1, data2));
}).catch(error => {
// handle/report error
});
}, []);
// *** render using the current values in `processedData`
请注意，由于仅在首次创建组件时才执行此操作，因此当组件中的其他状态发生更改（如果它具有其他状态）时，您无需担心取消它等操作。如果调用依赖于您在依赖项数组中列出的其他状态数据，则在调用axios的过程中如果其他数据发生了更改，则可能需要忽略先前的结果。但同样，您在这里所做的也不是。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句