reactjs - 反应useEffect如何确定循环中的多个异步任务何时完成

Question

我有一个奇怪的场景，我有一个 useEffect 从服务器检索数据，然后在我的应用程序中设置状态。奇怪的是，我让它在 for 循环中针对它检测到的设备数量执行此操作。每次迭代的数据大小范围相当大，并导致异步反应异常。这没关系，因为它是最佳的，但我如何才能确定 useEffect 何时完成。我已经尝试过了，但由于每次迭代的随机数据大小，它们在不同的时间出现，我无法正确记录它......

useEffect(() => {
    // this grabs all historical data only if the indexDB does NOT exist
    if (indexDBExists.userExists === false && devices.devices !== null) {
        console.log("getAllHistoricalData() mounted")
            let valueArray = []
            let keyArray = []
            for (let i=0; i<devices.devices.length; i++){
                getAllHistoricalData(devices.devices[i]).then((res) => {
                    valueArray.push(res)
                    keyArray.push(devices.devices[i])
                    if (i === devices.devices.length - 1){
                        const counter = allHistoricalData.done + 1
                            setAllHistoricalData({values: valueArray, keys: keyArray, done: counter})
                        }else{
                            const counter = allHistoricalData.done + 1
                            setAllHistoricalData({values: valueArray, keys: keyArray, done: counter})
                        }
                }).catch((err) => {
                    console.log(err)
                })
            }
    }
    return () => {
        console.log("getAllHistoricalData() un-mounted")
    };
}, [indexDBExists.user, devices.devices]);

如您所见，我已尝试创建一个计数器，以后可以使用该计数器与 devices.devices 的长度进行比较。但是，这不起作用，因为计数器变量是在异步任务之前创建的，并且在 setState 时不是最新的。我怎样才能知道这个 useEffect 何时完成？

标签： reactjsasynchronousstateuse-effect