使用套接字io后重新渲染的次数过多

Question

我做的事情类似于omegle，这是我的一些代码，请看useEffect函数。

const Messanger =(props)=>{
let socket = props.socket;
let intro;
const myId = socket.id;
const [readOnly,setReadOnly] = useState(true);
const [messages,setMessages]=useState([]);
const [stranger_name,setStranger_name] = useState(null);
const [disconnected,setDisconnected] = useState(false);
const [room,setRoom] = useState(null);
let messageRef = React.createRef();
let messagesEnd =React.createRef();

当服务器在两个用户之间找到一个匹配项时，它将一个房间内的用户连接在一起，然后向其发送一个joinRoom套接字请求，以通知前台他们已连接。]

useEffect(()=>{

  socket.once("joinRoom",(data)=>{
    setDisconnected(false);

  setMessages([]);
  setStranger_name(data.name);
  setRoom(data.room);
   setReadOnly(false);
  console.log("JOING ROOM")
});


},[stranger_name])
[当用户收到消息时，将触发此脚本

useEffect(()=>{
  socket.once('messageToClient',(data)=>{
    setMessages([...messages,{message:data.message,id:data.id}])         
    });
    scrollToBottom();
},[messages])



并且在渲染之前，我在控制台上记录了一些文本以查看我渲染了多少次

console.log('render')

return (DOM)
主要问题是，每当我断开与正在聊天的用户的连接并重新启动时，DOM就会重新渲染很多次，例如，在收到消息和启动时，都会触发console.log代码4次。与另一个用户聊天，console.log（'render'）函数被触发8次，依此类推

我做的事情类似于omegle，这是我的一些代码，请看一下useEffect函数。 const Messanger =（props）=> {让socket = props.socket;让介绍const myId = socket.id; const [...

Answer 1

您本质上是在messages更改时通过重新订阅套接字事件来创建无限循环，从而导致setMessages被多次触发，从而导致钩子重新订阅等。]

以下是临时的。解决而不是完整的答案，因为您应该在组件外部处理套接字消息，将其存储在redux中，然后使用它们。