React聊天应用批量标记消息已读时的状态同步问题

问题根源在于useState的闭包特性：当多个message.tsx组件同时触发onReadMessage时，每个onReadMessage函数捕获的都是调用瞬间的messages和userMessages旧状态。比如第一条消息更新时用的是旧数组，第二条消息更新时同样基于旧数组修改，最终只有最后一次更新会覆盖生效，导致前面的消息状态无法同步。

把setMessages和setUserMessages改成函数式更新，每次基于最新的前序状态修改，彻底避开闭包捕获旧值的问题：

修改communicationContext.tsx里的状态更新逻辑：

// 替换原来的setMessages和setUserMessages
setMessages(prevMessages => 
  prevMessages.map(message => 
    message._id === updatedMessage._id ? updatedMessage : message
  )
);

setUserMessages(prevUserMessages => 
  prevUserMessages.map(message => 
    message._id === updatedMessage._id ? updatedMessage : message
  )
);

这样每次更新都会基于最新的状态值，所有消息的已读状态都能正确同步。

当前每条未读消息单独发请求，不仅性能差，还容易引发并发更新冲突。建议改成进入对话时批量处理未读消息：

1. 进入对话时筛选未读消息，批量标记已读：

// 进入对话获取消息的逻辑
const fetchConversationMessages = async (conversationId: string) => {
  const fetchedMessages = await CommunicationService.getConversationMessages(conversationId);
  setMessages(fetchedMessages);
  
  // 筛选所有未读的对方消息ID
  const unreadIds = fetchedMessages
    .filter(msg => !msg.own && !msg.read)
    .map(msg => msg._id);
  
  if (unreadIds.length > 0) {
    await batchMarkRead(unreadIds);
  }
};

2. 新增批量处理函数：

// communicationContext.tsx 新增
const batchMarkRead = async (messageIds: string[]) => {
  const updatedMessages = await CommunicationService.batchReadMessages(messageIds);
  
  if (updatedMessages.length === 0) return;

  // 批量更新messages状态
  setMessages(prev => 
    prev.map(msg => updatedMessages.find(um => um._id === msg._id) || msg)
  );
  
  // 批量更新userMessages状态
  setUserMessages(prev => 
    prev.map(msg => updatedMessages.find(um => um._id === msg._id) || msg)
  );

  // 给发送方推送已读通知（可按需改为批量通知）
  updatedMessages.forEach(msg => {
    const notification = {
      receiverId: msg.sender?._id,
      text: "已读你的消息",
      silent: true,
      read: false,
      type: "message",
    };
    handleAddNotification?.(notification);
    handleSendNotification?.({
      ...notification,
      senderId: msg.sender?._id,
      senderName: msg.sender?.name,
      payload: { message: msg },
    });
  });
};

3. 移除message.tsx里的自动触发逻辑：

// 删掉message.tsx中的这段useEffect
// useEffect(() => {
//     !own && !read && onReadMessage?.(_id);
//     // eslint-disable-next-line react-hooks/exhaustive-deps
//   }, []);

如果想用useReducer，不需要替换所有useState，只把消息相关的状态抽离即可：

// 定义消息相关的reducer
type MessageAction = 
  | { type: 'MARK_READ', payload: ChatMessage }
  | { type: 'SET_MESSAGES', payload: ChatMessage[] }
  | { type: 'SET_USER_MESSAGES', payload: ChatMessage[] };

const messageReducer = (state: { messages: ChatMessage[], userMessages: ChatMessage[] }, action: MessageAction) => {
  switch(action.type) {
    case 'MARK_READ':
      return {
        ...state,
        messages: state.messages.map(m => m._id === action.payload._id ? action.payload : m),
        userMessages: state.userMessages.map(m => m._id === action.payload._id ? action.payload : m),
      };
    case 'SET_MESSAGES':
      return { ...state, messages: action.payload };
    case 'SET_USER_MESSAGES':
      return { ...state, userMessages: action.payload };
    default:
      return state;
  }
};

// 在context中使用
const [messageState, dispatch] = useReducer(messageReducer, { messages: [], userMessages: [] });

// 替换onReadMessage里的状态更新
dispatch({ type: 'MARK_READ', payload: updatedMessage });

这样只迁移消息相关状态，不影响其他useState，重构成本极低。

内容的提问来源于stack exchange，提问作者Luke M