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

Question

当我试图处理来自api的数据时，然后使用它来呈现，但是我总是会遇到异步的问题，因为process函数不会等待我的获取函数。

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

Answer 1

读到你的问题，据我所知，你不需要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期间发生了更改，则可能需要处理更早的结果。但再说一次，你在这里所做的不是这样的。

Answer 2

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

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

下面是更多的例子：

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