React useMemo 无法获取数组对象最新状态的原因及解决方案-js教程-PHP中文网

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

本文解析了 React 中 useMemo 未响应数组对象状态更新的根本原因——异步操作未正确等待 Promise 完成，导致 setAsyncProcesses 提前触发、依赖数组引用未更新，并提供基于 Promise.all 的可靠修复方案。

本文解析了 react 中 `usememo` 未响应数组对象状态更新的根本原因——异步操作未正确等待 promise 完成，导致 `setasyncprocesses` 提前触发、依赖数组引用未更新，并提供基于 `promise.all` 的可靠修复方案。

在 React 函数组件中，useMemo 的执行严格依赖其依赖数组（deps）中值的引用变化。当 asyncProcesses 是一个由 useState 管理的对象数组时，useMemo 只有在 asyncProcesses 引用发生改变（即 setAsyncProcesses 被调用且传入新数组）时才会重新计算。然而，问题代码中存在一个关键陷阱：

asyncProcesses.forEach(async (process, i) => {
  const newProcess = await checkUploadCsvProcess(/* ... */);
  newAsyncProcesses.splice(i, 1, newProcess); // ❌ 副作用式修改
});
setAsyncProcesses(newAsyncProcesses); // ⚠️ 过早调用！

此处 forEach 是同步方法，它会立即遍历并启动所有 checkUploadCsvProcess（返回 Promise），但不会等待任何 Promise 结束。因此 setAsyncProcesses 在所有异步操作完成前就被执行，此时 newAsyncProcesses 中的元素仍为旧引用（例如 snackbarType 仍为 'uploading'），导致 useMemo 接收到的 asyncProcesses 并非最终更新后的版本。

✅ 正确做法：使用 Promise.all 确保状态更新时机准确

应将并发异步操作收集为 Promise 数组，并用 Promise.all 统一等待全部完成后再更新状态：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

const updateProcesses = async () => {
  try {
    // 1. 并发执行所有检查，返回 Promise<asyncprocess> 数组
    const updatedProcesses = await Promise.all(
      asyncProcesses.map(async (process, i) => {
        return checkUploadCsvProcess(
          process as AsyncProcessCsvUpload,
          {
            actionName: dictionary.review,
            actionOnClick: () => {
              navigate(routes.linkedAccounting);
              setIsOpenInDialog(AsyncProcessType.CsvUpload, true);
            },
          }
        );
      })
    );

    // 2. 过滤掉 undefined（如 catch 中返回），生成全新数组
    const validProcesses = updatedProcesses.filter(Boolean) as AsyncProcess[];

    // 3. 使用新数组触发重渲染 → useMemo 将收到最新引用
    setAsyncProcesses(validProcesses);
  } catch (error) {
    console.error('Failed to update async processes:', error);
  }
};</asyncprocess>

? 关键点说明：

map + Promise.all 确保所有异步逻辑完成后再进入 setAsyncProcesses；

validProcesses 是一个全新数组引用，包含已更新字段（如 snackbarType: 'success'）的对象，满足 useMemo 依赖更新条件；

避免直接修改原对象属性（如 process.snackbarType = 'success'），虽可工作，但违背不可变原则，易引发隐性 bug；推荐在 checkUploadCsvProcess 内部返回新对象（见下方优化建议）。

? 进阶建议：保持不可变性，提升可预测性

当前 checkUploadCsvProcess 直接修改传入对象（如 process.snackbarType = 'success'），这属于突变（mutation），虽能“生效”，但破坏了 React 状态管理的最佳实践。更健壮的写法是返回一个新对象：

// ✅ 推荐：纯函数式更新，返回新对象
export const checkUploadCsvProcess = async (
  process: AsyncProcessCsvUpload,
  reviewAction: { actionName: string; actionOnClick: () => void }
): Promise<asyncprocesscsvupload undefined> => {
  try {
    const integration = await integrationsClient.getIntegration(process.data.integrationId);
    const { logs, status } = integration;

    // 构建新 process 对象，不修改原对象
    const baseUpdate = {
      ...process,
      timesChecked: (process.timesChecked || 0) + 1,
    };

    if (status === IntegrationStatus.UPLOAD) {
      return {
        ...baseUpdate,
        isActive: true,
        progress: Math.round((logs?.info?.progress || 0) / (logs?.info?.transactionCount || 1) * 100),
      };
    } else if (status === IntegrationStatus.ERROR) {
      return {
        ...baseUpdate,
        isActive: false,
        snackbarType: 'error',
        snackbarAction: reviewAction,
        data: { ...process.data, errors: logs?.error || {} },
      };
    } else {
      return {
        ...baseUpdate,
        isActive: false,
        snackbarType: 'success',
        snackbarAction: reviewAction,
      };
    }
  } catch (error) {
    console.error('checkUploadCsvProcess failed:', error);
    return undefined;
  }
};</asyncprocesscsvupload>