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

Posted 2023-02-21

【中文标题】如何在反应中使用socket.on？

【英文标题】：How to use socket.on in react?

【发布时间】：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>
  );
;

【参考方案1】：

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

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

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