javascript - 如何在 React 中停止 for 循环直到异步操作完成？

Question

我有一个组件，在其中我正在与 API 通信(这里我用超时代替模拟)。我在 for 循环中进行了一些调用以更新当前交互索引上的数组。最后我想 console.log 添加数据的所有数组。这就是问题所在。 Loop 正在经历所有迭代并且不等待完成异步任务，因此它打印空数组并带有注释，说明有数据但现在才来。

我尝试添加useState，但没有解决问题。

import React, {useEffect} from 'react';

function Ingredients() {
    const heatingStepsTime = [];
    const heatingStepsTimer = [];

    function getTimes(i, type) {
        if (type === "time") {
            setTimeout(() => {
                heatingStepsTime[i] = i;
            }, 1000);
        } else {
            setTimeout(() => {
                heatingStepsTimer[i] = i + 1;
            }, 1000)
        }
    }

    const getProcess = () => {
        for (let i = 0; i < 3; i++) {
            getTimes(i, "time");
            getTimes(i, "timer");
        }
    };

    useEffect(getProcess, []);
    console.log(heatingStepsTime);
    console.log(heatingStepsTimer);

    return (
        <div className="App">
            test
        </div>
    );
}

export default Ingredients;

有没有办法在 React 中停止 for 循环迭代，以便在完成异步任务后它会继续？

Answer 1

试试这个

function App() {
    function getTimes(i) {
      return new Promise(resolve => {
        setTimeout(() => {
            resolve(i);
        }, 1000);
      });
    }

    const [heatingStepsTime, setHeatingStepsTime] = useState([]);

    const getProcess = () => {
      const promises = '0'.repeat(10).split('').map((c, i)=>getTimes(i));
      Promise.all(promises)
      .then(result=> setHeatingStepsTime(result));
    };

    useEffect(getProcess, []);

    return (
        <div className="App">
          {heatingStepsTime.map((p,i)=><div key={i}>{p}</div>)}
        </div>
    );
}

https://stackblitz.com/edit/react-szrhwk

Explanation:

function getTimes(i) {
      return new Promise(resolve => {
        setTimeout(() => {
            resolve(i);
        }, 1000);
      });
    }

要模拟 API，您应该使用 promise 来模拟它。该计时器将在超时时解决 promise 。

const [heatingStepsTime, setHeatingStepsTime] = useState([]);

您想将结果存储到一个状态中，以便 React 知道要呈现结果

'0'.repeat(10).split('')

这只是为了模拟你的for循环...如果你有多个API调用你可以忽略它...只需将其替换为

const promises = [apiCall1(), apiCall2()];

Promise.all(promises)
      .then(result=> setHeatingStepsTime(result));

这将等待所有的 promise 解决并将结果存储到状态中