React Native GiftedChat 编辑消息文本不更新 仅改_id才生效

出现这个现象是两个逻辑共同导致的：

• 你的状态更新存在可变突变问题：虽然通过[...messages]浅拷贝了外层消息数组，但数组内的单个消息对象仍然和原state中的对象是同一个引用，直接给newMessages[index].text赋值属于直接修改原state的属性，React和组件内部的浅比较逻辑会判定该消息项未发生变化，跳过对应聊天气泡的重渲染流程。
• React Native GiftedChat 内部的FlatList、气泡组件默认以消息的_id作为列表key和核心记忆（memo）比对依赖，当你修改_id时，列表会判定这是一条全新的消息，强制销毁旧组件、渲染新组件，才会出现改_id就正常、仅改text不更新的表现。

不需要修改消息的_id字段，只要保证消息更新符合不可变数据要求即可：替换数组中对应位置的消息时，生成全新的对象引用，不要直接修改原有对象的属性。

修正后的代码参考：

const onSend = useCallback((messagesToSend = []) => {
  if(editMessage != null){
    setEditMessage()
    const m = messagesToSend[0]
    // 注意：如果你的state定义是const [messages, setMessages] = useState([])，这里要对应使用setMessages，不要写错方法名
    setMessages(prevMessages => {
      const index = prevMessages.findIndex(mes => mes._id === editMessage._id);
      if(index === -1) return prevMessages;
      const newMessages = [...prevMessages];
      // 生成全新的消息对象，不直接修改原有对象属性
      newMessages[index] = {
        ...newMessages[index],
        text: m.text
      }
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
      return newMessages
    })
  }else{
    setReplyMessage()
    appendMessage(messagesToSend)
  }
}, [editMessage])

额外排查点 #

如果你自定义了renderBubble渲染气泡组件，检查下自定义组件是否加了不合理的memo比对逻辑，比如只比对_id忽略text等其他属性变化，如果有需要把text加入比对依赖项。

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