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/