React useMemo 未获取数组对象最新状态的根本原因及解决方案

先说核心结论：useMemo 依赖的数组对象更新后未能触发重新计算，根源并非 useMemo 本身，而是异步操作中使用了 forEach，导致状态更新节奏混乱。 以下将详细分析问题成因，并给出基于 Promise.all 的正确批量处理方案。

useMemo 的触发机制

在 React 函数组件中，useMemo 仅依赖数组中元素的引用变化。当 asyncProcesses 是 useState 管理的数组时，useMemo 只有在数组变量本身发生新引用赋值后（例如 [...oldArray] 或 array.map(...) 返回新数组），并且这个新数组被 setAsyncProcesses 同步设置后，才会重新执行。问题在于：异步操作尚未全部完成，就过早调用了 setAsyncProcesses。

典型错误写法

原代码中常见错误模式如下：

asyncProcesses.forEach(async (process, i) => {
  const newProcess = await checkUploadCsvProcess(/* ... */);
  newAsyncProcesses.splice(i, 1, newProcess); //  修改副本
});
setAsyncProcesses(newAsyncProcesses); //  过早调用！此时 newProcess 尚未全部 resolve

Array.prototype.forEach 是同步方法，即使回调函数标记为 async，也不会等待所有 Promise 完成再执行下一行。它会立即启动所有异步任务，然后跳到 setAsyncProcesses。此时 newAsyncProcesses 中大部分 newProcess 仍处于 pending 状态，因此最终设置到 state 中的是一个部分未完成、字段仍为旧值（例如 'uploading'） 的中间态数组。useMemo 取到的正是这个“过期”版本，自然无法反映最终的 'success' 状态。

正确解决方案

正确做法是：先并发发起所有请求，等待全部完成，再一次性更新状态。 推荐使用 Promise.all 配合 map 实现：

const updateProcesses = async () => {
  try {
    // 并发执行所有检查，返回 Promise 数组
    const updatedProcesses = await Promise.all(
      asyncProcesses.map(async (process, i) => {
        return checkUploadCsvProcess(
          process as AsyncProcessCsvUpload,
          {
            actionName: dictionary.review,
            actionOnClick: () => {
              na vigate(routes.linkedAccounting);
              setIsOpenInDialog(AsyncProcessType.CsvUpload, true);
            },
          }
        );
      })
    );
    // 过滤掉 undefined（例如 catch 中返回的情况），确保类型安全
    const validProcesses = updatedProcesses.filter(Boolean) as AsyncProcess[];
    // 一次性设置最新状态
    setAsyncProcesses(validProcesses);
  } catch (error) {
    console.error('Failed to update async processes:', error);
  }
};

// 调用此函数替代原来的 forEach 逻辑
updateProcesses();

注意事项

• Promise.all 的短路失败特性：只要其中一个 Promise reject，整个组合就会立即 reject。如需容错，可改用 Promise.allSettled，然后手动过滤出 fulfilled 的结果。
• 避免副作用式突变：checkUploadCsvProcess 内部直接修改传入的 process 对象（例如 process.snackbarType = 'success'），属于突变（mutation）。虽然当前场景可行，但更推荐返回全新对象以保证不可变性（Immutability），例如：

  return {
    ...process,
    snackbarType: 'success',
    isActive: false,
    // ...其他覆盖字段
  };

• useMemo 的依赖项无需改动：[asyncProcesses, displayAsSnackbarList, dictionary, removeAsyncProcess] 本身合理，但需确保 dictionary 和 removeAsyncProcess 是稳定引用（通过 useMemo 或 useCallback 创建），避免触发不必要的重计算。

总结

useMemo 不刷新并非 Hook 本身失效，而是状态更新逻辑中埋入了竞态条件。修复思路为：将异步操作从“火球式并发 + 提前提交”改为“并发发起 + 聚合等待 + 原子提交”。 这一模式不仅解决了 useMemo 的陈旧数据问题，更大幅提升了状态的一致性和可预测性。在 React 中处理异步状态管理时，这是最值得倡导的做法之一。