如何在useEffect中处理获取的数据

Question

当我尝试处理来自 api 的数据时，然后使用它来渲染，但我总是 go 出现异步问题，因为进程 function 没有等待我的提取功能。

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;
}

即使我尝试将两个获取函数和进程 function 包装在异步 function 中，但问题仍然存在。

(async () => {
  await getData1();
  await getData2();
  setProcessedData(processData(fetchData1, fetchData2));
})

Answer 1

阅读您的问题，据我所知，您不需要fetchData1和fetchData2 ，您只需要processedData 。 您当前代码的问题在于它在调用setProcessedData时使用了fetchData1和fetchData2的默认值，它没有使用 axios 的结果。

等待两个 promise 解决并使用它们的结果。 看评论：

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`

请注意，由于您仅在首次创建组件时执行此操作，因此当组件中的其他 state 发生更改时（如果它具有其他状态），您无需担心取消它等。 如果调用依赖于您在依赖项数组中列出的其他 state 数据，则如果在调用 axios 期间其他数据发生更改，您可能需要处理忽略早期结果。 但同样，不是你在这里所做的。

Answer 2

Promise.all用于处理多个异步操作：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

这里有更多例子：

https://www.taniarascia.com/promise-all-with-async-await/