React useMemo 数组对象更新后无法获取最新状态的原因及解决方案

本文详细解析 React 中 useMemo 未响应数组对象状态更新的根因：异步操作未正确等待 Promise 完成，导致 setAsyncProcesses 提前触发、useMemo 依赖项未真正更新。同时提供基于 Promise.all 的可靠修复方案，帮助开发者彻底解决此类问题。

先从一个常见陷阱说起：在 React 函数组件中使用 useMemo 时，发现它始终不响应状态更新。反复调试后，你会发现问题并不在 React 本身，而是异步操作尚未完成，状态就被提前更新了。

具体问题如下这段代码所示：

asyncProcesses.forEach(async (process, i) => {
  const newProcess = await checkUploadCsvProcess(process, options);
  newAsyncProcesses.splice(i, 1, newProcess);
});
setAsyncProcesses(newAsyncProcesses);

表面上逻辑清晰：遍历数组、异步处理每个元素、更新数组、最后设置状态。但关键问题在于——forEach 是同步方法，不会等待内部 async 回调执行完毕。所有 checkUploadCsvProcess 实际上是并发启动的，而 splice 操作依赖的是闭包中的旧引用。当 setAsyncProcesses 被调用时，大多数异步操作尚未完成。最终 asyncProcesses 中仍然保留着原始的 Promise 对象，引用地址未改变，useMemo 自然无法感知任何变更。

问题的本质在于：依赖项看似已经更新，但引用地址并未发生变化——因为 setState 触发得过早。

正确做法：使用 map + Promise.all 替代 forEach + async

核心思路是将所有异步更新任务收集为一个 Promise 数组，待全部解析完毕后再批量更新状态：

// 正确实践：所有异步完成后再 setState
const updatePromises = asyncProcesses.map(async (process, i) => {
  try {
    const newProcess = await checkUploadCsvProcess(
      process as AsyncProcessCsvUpload,
      {
        actionName: dictionary.review,
        actionOnClick: () => {
          navigate(routes.linkedAccounting);
          setIsOpenInDialog(AsyncProcessType.CsvUpload, true);
        },
      }
    );
    return newProcess ?? process; // 防止返回 undefined 导致数组长度变化
  } catch (error) {
    console.error('Failed to update process:', error);
    return process;
  }
});

// 确保所有 Promise 解析完毕后再更新
Promise.all(updatePromises).then((updatedProcesses) => {
  setAsyncProcesses(updatedProcesses);
});

还有几个关键细节需要留意：

• 切勿直接修改 state 数组中的对象。例如 process.snackbarType = 'success' 这类操作直接违反了 React 不可变原则。即使对象内部属性发生了改变，useMemo 监测的依赖项引用未变，它永远不会重新计算。
• checkUploadCsvProcess 务必返回新对象（或深拷贝后的对象），而不是就地修改。更推荐采用纯函数式风格：
  

  // 返回新对象，保持不可变性
  return {
    ...process,
    isActive: status === IntegrationStatus.UPLOAD,
    snackbarType: status === IntegrationStatus.ERROR  'error' :
                  status === IntegrationStatus.SUCCESS  'success' : 'uploading',
    progress: status === IntegrationStatus.UPLOAD
       Math.round((logs.info.progress || 0) / (logs.info.transactionCount || 1) * 100)
      : undefined,
    snackbarAction: status !== IntegrationStatus.UPLOAD  reviewAction : undefined,
    data: {
      ...process.data,
      errors: status === IntegrationStatus.ERROR  logs.error || {} : undefined,
    },
  };

• useMemo 的依赖项 [asyncProcesses, displayAsSnackbarList, dictionary, removeAsyncProcess] 本身是合理的，但前提是 asyncProcesses 必须提供全新引用——即通过 setAsyncProcesses([...]) 或 setState(prev => [...prev]) 来触发更新。

总结

回到最初的问题：useMemo 不重新计算，并非 Hook 自身的缺陷，而是状态更新时机选择错误，导致依赖项“看似变了，实际引用未变”。修复方法其实很简单，只需遵循两条原则：

1. 用 Promise.all(map(...)) 替代 forEach(async)——确保所有异步操作完成后才调用 setState；
2. 坚持不可变更新——始终返回新的数组、新的对象，避免就地修改。

只要 asyncProcesses 的引用真正发生了变化，useMemo 就会重新计算，snackbarType 等字段也会自动更新。别让时序陷阱影响你的开发效率。