更新for循环中的进度条答案

【问题标题】：Update progress bar in for loop更新for循环中的进度条
【发布时间】：2021-12-30 14:17:01
【问题描述】：

我确实看到很多标题相似的文章，但它确实触及了我的问题。

我正在尝试从 forEach 循环中更新我的进度条，我将 % 发送到我的 redux 状态，我的进度条组件从那里获取它，一切正常（在控制台中）但是实际上，我的 UI 在循环运行时没有更新，因为 UI 被屏蔽了。有办法解决吗？还是我遗漏了一些非常明显的东西？

主要组件

const CollectData = async (props) => {
    resp = await CollectData()
    //more stuff
}

在控制台这里记录storeData会不断更新

收集数据

array.forEach((x, index) => {
    store.dispatch({ type: 'PERCENT', payload: percentvalue})
    //doing stuff
}

进度条

import { ProgressBar } from 'react-bootstrap';
import { useSelector } from 'react-redux';


const Percentage = () => {
    const storeData = useSelector(state => state)

    return (<div><ProgressBar animated now={storeData.percentage} label={`${storeData.percentage}%`} />{storeData.percentage}</div>)
}

export default Percentage

【问题讨论】：

我可能是错的，但我相信因为 store.Dispatch 在 forEach 循环中被调用，useSelector 的内部状态在 forEach 终止之前不会更新。不过我可能是错的。向您的组件添加一个 useEffect 并将 storeData.percentage 添加为依赖项，控制台记录结果，这将告诉您状态是否正确更新。
我已经在我的主要组件中使用 useEffect 进行了检查，并且正在更新 storeData。我认为问题在于 UI 卡在 for 循环中，我不知道为什么
另外为了澄清，我使用的是 store.Dispatch 而不是钩子，因为它是常规函数而不是组件

标签： reactjs progress-bar

【解决方案1】：

我找到了一个通过像这样实现 setTimeout 承诺来解锁 UI 的解决方案

const pause = () => {
    return new Promise(r => setTimeout(r, 0))
}

并在此处调用它，这使 UI 有足够的时间来更新进度 .我正在暂停 forEach 循环几个循环来更新 UI 并继续

array.forEach((x, index) => {
    store.dispatch({ type: 'PERCENT', payload: percentvalue})
    if (index % 20 === 0) { await pause() }
    //doing stuff
}

【讨论】：