时间戳

首页 > 解决方案 > 如何在映射的promise中一一修改useState数组

javascript - 如何在映射的promise中一一修改useState数组

问题描述

我有 const [items, setItems] = useState<any[]>(itemsB.map(() => ({ loading: true }))); 和

itemsB.map(async (itemB: any, index: number) => {
    searchItems(itemB).then(result => {
        const newItems = [...items]; // Ref A
        newItems[index] = result;
        setItems(newItems);
    })
})

因为内部函数是异步获取，所以项目以不可预测的顺序返回，我想在items它们准备好后立即添加它们，用实际结果更改占位符加载对象。这几乎可以做到这一点，但是items在 Ref A 处引用的内容不会更新，因此它会循环更改每件事，然后最后只出现最后一个已检索的项目。

如果我做 a Promise.all().then()，它会等到所有项目都被检索到执行then部分，所以我想知道如何在项目被解决时设置它们。

标签： javascriptreactjsreact-hookses6-promise

解决方案

对 setItems 的调用被批处理以优化性能。如果先前的状态依赖于当前状态，请使用 setItems 的重载版本，它将 previousState 作为第一个参数。

searchItems(itemB).then(result => {
        setItems(items => {
                  const newItems = [...items]; // Ref A
                  newItems[index] = result;
                  return newItems;
        });
})

推荐阅读