使用Effect运行两次一旦从socket.io接收消息

Question

我正在使用React，Express和Socket.io构建一个简单的聊天应用程序。

每当客户端将消息发送到服务器时，服务器都会向每个用户广播消息。从后端服务器收到消息时，我有问题。

每次用户收到消息时，useffect将运行两次，而不是一次。

useEffect(() => {
    socket.on("broadcast_msg", (data) => {
      setMsg((list) => [...list, data]);
    });
  }, [socket]);

PS。后端服务器仅发出一次前端。 谢谢您的每一个回复：D

整个代码

import React from "react";
import { useEffect } from "react";
import { useState } from "react";

function Chat(props) {
  const { socket, username, room } = props;
  const [input, setInput] = useState("");
  const [msg, setMsg] = useState([]);

  // send msg to server
  const send_msg = (e) => {
    if (input !== "") {
      socket.emit("send_msg", {
        room: room,
        author: username,
        message: input,
      });
    }
  };

  // listen to boardcast msg
  useEffect(() => {
    socket.on("broadcast_msg", (data) => {
      setMsg((list) => [...list, data]);
    });
  }, [socket]);

  return (
    <div className="chat">
      <div className="chat-header"></div>
      <div className="chat-body">
        {msg.map((data) => {
          return (
            <>
              <h1>{data.author}</h1>
              <h1>{data.room}</h1>
              <h1>{data.message}</h1>
            </>
          );
        })}
      </div>
      <div className="chat-footer">
        <input
          type="text"
          placeholder="Enter the message..."
          onChange={(e) => {
            setInput(e.target.value);
          }}
        />
        <button onClick={send_msg}>Send</button>
      </div>
    </div>
  );
}

export default Chat;

Answer 1

useEffect(() => {
    const eventListener = (data) => {
        setMsg((list) => [...list, data]);
    };
    socket.on("broadcast_msg", eventListener);

    return () => socket.off("broadcast_msg", eventListener);
  }, [socket]);

与听众一起做。
运行使用效果并清洁侦听器时再次触发，这应该可以解决问题。
或安装时仅运行一次。

 useEffect(() => {
    socket.on("broadcast_msg", (data) => {
      setMsg((list) => [...list, data]);
    });
  }, []);