如何在反应中使用socket.on？答案

【问题标题】：How to use socket.on in react?如何在反应中使用socket.on？
【发布时间】：2021-12-15 05:05:59
【问题描述】：

我正在构建一个小型聊天应用程序，但在接收响应消息时遇到问题。问题是当我收到一条消息时我setMessages，但同时messages 状态被清除。问题可能是我不知道在哪里放置socket.on，目前它在useEffect 挂钩内。

export const Room = ({ socket }) => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const { id } = useParams();
  
  useEffect(() => {
    socket.emit("join room", id);
  }, []);

  useEffect(() => {
    socket.on("message", (message) => {
      setMessages([
        ...messages,
        { message: message, createdBy: "other", id: uuidv4() },
      ]);
    });
  }, []);
  const sendMessage = () => {
    console.log("send");
    socket.emit("message", input);
    setMessages([
      ...messages,
      { message: input, createdBy: "me", id: uuidv4() },
    ]);
  };
  console.log("foo");
  return (
    <div className="flex justify-center text-center">
      <div className="w-screen h-screen px-2 max-w-4xl mt-10">
        <p className="text-3xl">Code: {id}</p>
        <div className="bg-white w-full h-3/4 rounded-xl border-2 border-black overflow-y-auto">
          {messages.map((message) => (
            <Message
              text={message.message}
              createdBy={message.createdBy}
              key={message.id}
            />
          ))}
        </div>
        <div className="flex flex-row border-2 border-black mt-2 rounded-xl p-2 bg-white">
          <input
            className="flex-grow border-none focus:outline-none"
            onInput={(e) => setInput(e.target.value)}
          />
          <button
            className=" bg-green-500 rounded-xl px-2 py-1"
            onClick={sendMessage}
          >
            Send
          </button>
        </div>
      </div>
    </div>
  );
};

【问题讨论】：

标签： javascript reactjs sockets websocket socket.io

【解决方案1】：

我很确定您遇到了关闭问题。 messages 在 useEffect 中运行时并不是你想象的那样——它可能不是最新版本。

使用 setter 的功能变体是更安全和良好的做法。这样您就可以确定messages 是当前版本：

setMessages(messages => [
  ...messages,
  { message: message, createdBy: "other", id: uuidv4() },
]);

【讨论】：