react forEach 里面 异步更新 setState

如题

要是等数组 处理好 , 再setState 中间 就会卡一段时间

const [list, setList] = useState([]);

let arr= []

for (const item of sourceList) {
  let dd = await solve(item) // 耗时操作
  arr.push(item)
}

setList(arr)

然后 就想在 forEach 里面 顺便 setState 试试

const [list, setList] = useState([]);

sourceList.forEach(async (x)=>{
  let dd = await solve(x) // 耗费时操作
  setList(list.concat(dd))
})

结果发现 sourceList 老是最后一个元素 塞进去了 ，别的 元素都抛弃了

后来发现可以通过 setState 回调来解决

setCounter(prevCounter => prevCounter +1)

const [list, setList] = useState([]);

sourceList.forEach(x=>{
  let dd = await solve(x) // 耗费时操作
  setList(prevState=>[...prevState,dd])
})

这样就没有问题了， 数组 也是 异步 push 进 list 里面啦

参考来源 https://www.reddit.com/r/reactjs/comments/ouxq7z/update_state_from_a_foreach/