Reactjs 使用Socket.io重置反应状态

我目前正在努力解决与socket.io和React相关的问题。无论何时调用socket.on（），状态都会重置，之前的所有聊天数据都会消失。换句话说，每当用户收到消息时，“消息”状态都会重置

我在这上面看到了一篇类似的帖子，但我似乎无法将同样的解决方案应用到我的问题上。任何帮助都将不胜感激

功能组件（道具）{
const[messages，setMessages]=useState（[]）；
const[socket，setSocket]=useState（socketioclient（“**********”）；
功能插座（房间）{}
函数_onMessageUpdate（消息）{
设置消息([
…信息，
{
作者：“他们”，
键入：“文本”，
数据：{text:message}，
},
]);
}
useffect（（）=>{
socket_joinRoom（parseInt（props.props[0]，10））；
socket.on（“updateMessage”（消息）=>{
//**调用此命令时，状态将重置*
控制台日志（消息）；
_onMessageUpdate（消息）；
});
return（）=>{
socket.off（“更新消息”）；
socket.disconnect（）；
};
}, []);
函数_onMessageAssent（消息）{
setMessages（[…messages，message]）；
emit（“sendMessage”，message.data.text）；
}
返回(
);
}

首先，您需要在其自身的使用效果中分离加入房间的逻辑

useEffect(()=>{
        socket_joinRoom(parseInt(props.props[0],10));
},[props.props[0]])

因为您将在另一个useEffect中收听接收到的消息的更改 因此，您不需要在每次收到新消息时初始化加入逻辑

对于message函数，它可以是另一个useffect，它可以像下面的代码一样监听接收到的“messages”

useEffect(()=>{
   socket.on('message',(message)=>{
   setMessages((currentMessages)=>[...currentMessages,message])
}
},[])

---

此useEffect将启动并侦听更改，并将新消息添加到以前的消息中

您可以尝试一下

useRef

吗？您可以简单地初始化数组并继续添加到其中。裁判不会造成任何重装，所以你会很安全。此外，将数据写入本地存储也有助于在刷新之间保持数据。@Abhilash在这种情况下，如何使用“useRef”？这些消息需要是可变的，我的意思是你仍然需要你的状态来检测更改和刷新，但是把你的更新推到ref，这样你总是有新旧数据。理想的方法。具有依赖关系的效果。感谢您的回复。国家不再重新设置。但是，useEffect称为提交次数。换句话说，useEffect在发送第二条消息时触发两次，在发送第三条消息时触发三次。我如何解决这个问题？您可以从第二个useEffect中删除[messages]作为依赖项，我已经在答案中解决了它