javascript - 在 React 的 forEach 循环中更新状态无法正常工作

Question

我想在每次收到 promise 时循环更新一个状态。但我的状态只显示了最后的 promise 。

我猜这是因为，由于设置状态是异步的，它使用了在先前状态更新之前可用的 Map。

如何在不使用 `Promise.all 的情况下实现这一目标？

const [dataList, setDataList] = useRef(new Map())

  useEffect(() => {
    ids.forEach(id => {
      getData(id).then(data => {
        if (data) {
          setDataList(dataList.set(id, data))
        }
      })
    })
  }, [ids])

Answer 1

它与 React 的工作方式有关。它等待所有 setState 调用特定的 state 并选择最后一个来更新 DOM。

如果您想避免这种行为，请使用一个更新程序函数，该函数将始终获得最新的 state，即使此后组件没有呈现。像这样:

ids.forEach((id) => {
  getData(id).then((data) => {
    if (data) {
      setDataList((dataList) => {
        let newDataList = new Map(dataList);
        newDataList.set(id, data);
        return newDataList;
      });
    }
  });
});