如何防止React和socket.io中出现无限循环

Question

你好，我正在建立一个实时聊天工具。它的工作原理是这样的，但是它创建了一个无限循环，并打开了数千个套接字。

我尝试构建一个数组并推送到该数组然后返回它，但是当我发送消息时，我的聊天不会更新。

有人可以帮忙吗？

提前感谢！

import React from 'react';

export default function useGetChatMessages(_id) {
  const [chatMessages, setChatMessages] = React.useState([]);

  React.useEffect(() => {
    const io = require('socket.io-client');
    const socket = io('http://localhost:9090');
    socket.emit('send-chat-id', _id);
    socket.on('chat-messages', data => {
      setChatMessages(data.messages);
    });
    socket.on('new-chat-message', message => {
      chatMessages.push(message);
    });
  }, [_id, chatMessages]);

  return chatMessages;
}

Answer 1

每当chatMessages更改时，您都会创建另一个套接字，并添加所有事件处理程序，从而更改chatMessages，依此类推。

不要使chatMessages成为useEffect的依赖项，将updater function与setChatMessages一起使用以获取chatMessages的当前值，并使用新消息创建新数组。

[注意：不要在React中改变状态（例如使用push），请创建一个新数组，如在new-chat-message处理程序中所见。

export default function useGetChatMessages(_id) {
  const [chatMessages, setChatMessages] = React.useState([]);

  React.useEffect(() => {
    const io = require('socket.io-client');
    const socket = io('http://localhost:9090');
    socket.emit('send-chat-id', _id);
    socket.on('chat-messages', data => {
      setChatMessages(data.messages);
    });
    socket.on('new-chat-message', message => {
      setChatMessages(messages => [...messages, message]); // updater function
    });
  }, [_id]);

  return chatMessages;
}

Answer 2

• 仅连接到套接字io一次。将其放在安装好的组件外面，以进行最佳实践。
• [每次收到新消息时都不要听。仅收听1次，因此请删除您收到的新消息的更新。

喜欢这个：

    import React from 'react';
    import io from 'socket.io-client'
    const socket = io('http://localhost:9090')

    export default function useGetChatMessages(_id) {
      const [chatMessages, setChatMessages] = React.useState([]);

      React.useEffect(() => {
        socket.emit('send-chat-id', _id);
        socket.on('chat-messages', data => {
          setChatMessages(data.messages);
        });
        socket.on('new-chat-message', message => setChatMessages([...chatMessages, message]));
      }, [_id]);

      return chatMessages;
    }