React useReducer状态更新异常：快速批量上传图片后部分图片状态未同步

看起来你遇到的是高频状态更新下的经典问题，我来帮你拆解下原因和解决办法。

首先，问题的核心在于快速批量上传时，多个图片的上传完成回调会几乎同时触发dispatch，如果这些UPDATE_IMAGE_STATUS action针对同一个partId下的不同图片，很容易出现状态更新被覆盖的情况：

• 当多个action在React的批量更新机制中被处理时，每个action可能都拿到了同一个旧的state快照；
• 比如第一个action把图片A的状态改成completed，第二个action基于旧数组把图片B改成completed，最终state里的图片A会被覆盖回uploading，就出现了你看到的“实际已上传但状态未同步”的问题。

下面给你几个可行的解决方案：

方案一：用flushSync强制同步更新（React 18+） #

React 18默认会对异步回调中的dispatch进行批量处理，我们可以用flushSync强制React立即处理当前的状态更新，避免批量导致的覆盖：

import { flushSync } from 'react';

// 修改你的dispatch调用
UploadManager.getInstance(token).addToQueue(newImage, partId, (status, serverUrl, key) => {
  flushSync(() => {
    dispatch({
      type: 'UPDATE_IMAGE_STATUS',
      payload: { partId, id: newImage.id, status, serverUrl, key },
    });
  });
});

方案二：延迟dispatch到下一个事件循环 #

把dispatch放到setTimeout里，让每个action在独立的事件循环中执行，确保状态更新依次生效：

UploadManager.getInstance(token).addToQueue(newImage, partId, (status, serverUrl, key) => {
  setTimeout(() => {
    dispatch({
      type: 'UPDATE_IMAGE_STATUS',
      payload: { partId, id: newImage.id, status, serverUrl, key },
    });
  }, 0);
});

方案三：优化reducer的不可变更新逻辑 #

你的reducer写法本身没问题，但可以去掉中间变量part，直接基于最新的state进行更新，减少闭包带来的潜在问题：

case 'UPDATE_IMAGE_STATUS': {
  const targetPart = state.faults[action.payload.partId];
  if (!targetPart) return state;

  return {
    ...state,
    faults: {
      ...state.faults,
      [action.payload.partId]: {
        ...targetPart,
        images: targetPart.images.map((img) =>
          img.id === action.payload.id
            ? {
                ...img,
                uploadStatus: action.payload.status,
                serverUrl: action.payload.serverUrl,
                key: action.payload.key,
              }
            : img
        ),
      },
    },
  };
}

方案四：用immer简化不可变更新 #

手动处理不可变更新很容易出错，推荐使用useImmerReducer代替原生useReducer，它可以让你用“ mutable”的写法实现不可变更新，避免覆盖问题：

import { useImmerReducer } from 'use-immer';

// 修改reducer为immer风格
const reducer = (draft, action) => {
  switch (action.type) {
    case 'UPDATE_IMAGE_STATUS': {
      const { partId, id, status, serverUrl, key } = action.payload;
      const targetPart = draft.faults[partId];
      if (!targetPart) return;
      
      const targetImg = targetPart.images.find(img => img.id === id);
      if (targetImg) {
        targetImg.uploadStatus = status;
        if (serverUrl) targetImg.serverUrl = serverUrl;
        if (key) targetImg.key = key;
      }
      break;
    }
    // 其他case...
  }
};

// 在组件中使用useImmerReducer
const [state, dispatch] = useImmerReducer(reducer, initialState);

额外调试建议 #

1. 检查newImage.id的生成逻辑，确保每个图片的id是唯一的——如果id重复，reducer会错误地更新同id的图片；
2. 在onStatusChange里加日志，记录每个图片的id、状态和dispatch触发时间，方便定位哪次更新没生效。

备注：内容来源于stack exchange，提问作者saimarshadd