React Native+Socket.IO收消息异常：仅触发handleSend时才显示新消息

问题分析 #

你的代码存在几个关键问题，导致接收的消息仅在触发发送操作时才显示：

1. 重复声明messages状态变量，会造成变量覆盖，干扰状态更新逻辑
2. 组件卸载时调用socket.disconnect()会直接断开全局Socket连接，若组件重新挂载（比如页面切换后返回），Socket无法自动恢复连接，进而无法接收消息
3. 未正确移除Socket事件监听，可能引发内存泄漏或重复监听的问题

修复步骤 #

1. 移除重复的状态声明

删除重复的const [messages, setMessages] = useState([]);，仅保留一行：

const [messages, setMessages] = useState([]);

2. 修正Socket监听的清理逻辑

将组件卸载时的socket.disconnect()改为移除指定事件监听，避免断开全局Socket连接：

useEffect(() => {
  // 定义消息接收处理函数
  const handleReceivedMessage = (data) => {
    const newMessage = { text: data.text, sender: 'Other', timestamp: new Date().getTime() };
    setMessages((prevMessages) => [...prevMessages, newMessage]);
  };
  
  socket.on('message', handleReceivedMessage);

  // 清理：仅移除当前组件的监听，不断开全局连接
  return () => {
    socket.off('message', handleReceivedMessage);
  };
}, []);

3. 验证Socket实例的正确性

确保../components/socket导出的是正确连接的Socket实例，示例如下：

// ../components/socket.js
import io from 'socket.io-client';

// 替换为你的实际服务器地址
const socket = io('http://your-server-domain:port');

export default socket;

4. 检查服务器端消息广播逻辑

确保服务器端在收到消息后，正确将消息广播给所有客户端，Node.js示例：

// 服务器端代码
io.on('connection', (socket) => {
  socket.on('message', (data) => {
    // 广播消息给所有客户端（包含发送者）
    io.emit('message', data);
    // 若仅需广播给发送者以外的客户端，使用socket.broadcast.emit('message', data);
  });
});

额外调试建议 #

• 在消息接收回调中添加console.log，验证是否成功收到服务器消息：

  const handleReceivedMessage = (data) => {
    console.log('收到服务器消息:', data);
    // ... 状态更新逻辑
  };
  

• 确认输入框的text状态和onChangeText函数绑定正确，避免发送逻辑异常

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