Expo+React Native+TypeScript开发聊天应用发消息后页面不实时更新问题

问题根因 #

1. 消息列表仅在ChatRoomScreen首次加载时拉取一次，发送新消息后没有触发消息列表的更新逻辑
2. MessageInput中存在聊天室ID时调用的updateMessage方法为空，没有执行任何同步操作
3. 消息列表状态初始值为undefined，可能导致FlatList渲染异常

修复步骤 #

1. 修改 ChatRoomScreen.tsx #

• 修正消息列表状态初始值为数组
• 给MessageInput传递消息发送后的回调函数，用于触发消息重新拉取

// 引入类型（可根据你后端返回的消息结构自定义）
type MessageItem = {
  id: string;
  content: string;
  user: { id: string };
}

const ChatRoomScreen = () => {
  // ...原有变量
  // 修正初始值为数组，语义化改名messages
  const [messages, setMessages] = useState<MessageItem[]>([]);
    
  const fetchMessages = async () =>{
    try {
      const response = await axios.get('https://mylaravelAPI.com/api/get/'+roomID)
      const result = response.data.message.reverse();
      setMessages(result) 
    } catch (e) {
      console.log('消息拉取失败', e)
    }       
  }

  // ...其余逻辑不变
  return (
    <SafeAreaView style={styles.page}>            
        <FlatList               
            data={messages}
            renderItem={({item}) => <Message message={item} roomID={roomID}/> }
            inverted                
        />
        <MessageInput 
            id={route.params?.id} 
            receiveID={route.params?.user} 
            userID={route.params?.isMe} 
            // 新增回调props
            onMessageSent={fetchMessages}
        />
    </SafeAreaView>   
  )
}

2. 修改 MessageInput.tsx #

• 新增onMessageSent props接收父组件回调
• 给发送请求添加异步处理，发送成功后调用回调刷新列表
• 补全updateMessage逻辑

// 定义props类型
type MessageInputProps = {
  id: string;
  receiveID: { id: string };
  userID: { id: string };
  onMessageSent: () => void;
}

const MessageInput = ({id, receiveID, userID, onMessageSent}: MessageInputProps) => {
  // ...原有变量

  const saveMessage = async () => {
    try {
      await axios({
        method: 'post',
        url: 'https://mylaravelAPI.com/api/post',
        headers: {
          'content-type': 'application/json',
        }, 
        data: JSON.stringify({
          "content": message,
          "userID": senderUserID,
          "replyToID": receiveUserID,
          "roomID": chatroom // 建议新增字段关联聊天室，后端逻辑可对应调整
        })
      });
      setMessage('');
      // 发送成功后触发父组件刷新消息
      onMessageSent();
    } catch (e) {
      console.log('消息发送失败', e);
    }
  }

  const updateMessage = () => {
    // 有聊天室场景下直接调用发送逻辑，如果你有编辑消息需求可自行调整
    saveMessage();
  }

  // ...其余逻辑不变
}

可选优化（体验更好） #

如果不想每次发送都重新拉取全量消息，可以直接在本地追加新消息到状态：

1. 在ChatRoomScreen新增追加消息的方法，传递给MessageInput

// ChatRoomScreen.tsx新增
const addNewMessage = (newMsg: MessageItem) => {
  // FlatList为inverted，所以新消息插在数组头部
  setMessages(prev => [newMsg, ...prev])
}

// 传递给MessageInput
<MessageInput 
  ...其他props
  addNewMessage={addNewMessage}
/>

2. 发送消息成功后，构造符合结构的新消息对象，调用addNewMessage即可，无需重新拉取全量数据。

如果需要实时接收对方发送的消息，可新增定时轮询拉取消息，或者接入WebSocket服务实现双向实时通信。

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