React Redux调用addMessageToStore后state未更新该如何解决?
问题原因
addMessageToStore方法中对conversations.map的返回值处理错误:map的作用是遍历原数组,返回每一项修改后的新元素组成新数组,但你在每一次遍历的分支里都返回了{...state, conversations: xxx}的完整根state对象,最终会导致state里的conversations字段被赋值为装满根state对象的异常数组,无法得到预期的更新结果。- 你声明
newUnread用的是const关键字,后续尝试给newUnread重新赋值会直接抛出语法错误,导致更新逻辑中断,返回旧state。
修复方案
调整addMessageToStore的逻辑,map遍历只返回会话对象本身,同时修正变量声明和可选的未读计数逻辑:
export const addMessageToStore = (state, payload) => { const { message, sender } = payload; return { ...state, conversations: state.conversations.map((convo) => { if (convo.id === message.conversationId) { // 改为let声明支持修改 let newUnread = convo.unreadMessages; // 注:原逻辑如果是当前打开的会话就加未读大概率不符合业务需求,这里改成非当前会话才加未读,可按需调整 if (state.activeConversation !== convo.otherUser) { newUnread = (parseInt(newUnread) + 1).toString(); } return { ...convo, messages: convo.messages.concat(message), latestMessageText: message.text, // 原逻辑用旧的latestMessageText,这里替换为新消息内容,可按需调整 unreadMessages: newUnread } } // 不匹配的会话直接返回原对象 return convo; }) }; };
内容的提问来源于stack exchange,提问作者Josh Susa
相关产品推荐
相关产品推荐

