usestate似乎没有与插座io一起使用

Question

我正在使用 socket.io 制作消息功能。 当我发送/接收消息时，我想更改 newMsgNO 的状态，但它似乎不起作用。 在下面的第二个 useEffect 中，第一个 console.log 始终显示 newMsgNO: 0 的初始状态，而第二个 console.log< /code> 每当它们进来时都会很好地显示 newMessages.current 的值。

这是我尝试的内容之一。在下面的 testMessage 中，我尝试更改状态，并使用新消息再次呈现组件。但newMsgNO的状态也是0。我不应该这样做，因为这只在我发送消息时才有效。我应该在 socket.on("new message", ...) 的代码中工作。

如何更改 socket.on("new message", ...) 中 newMsgNO 的状态？

...

 const newMessages = useRef([
    {
      userImg: "",
      userName: "",
      talkContent: "",
      talkTime: "",
      isContinuous: false,
    },
  ]);

  const [newMsgNO, countNewMsg] = useState(0);

  const testReceiveM = {
    userImg: "",
    userName: "ab",
    talkContent: "hello my name is...",
    talkTime: "22.03.04.12:22",
    isContinuous: false,
  };

  const testMessage = () => {
    socket.emit("send message", { roomId, msg: testReceiveM });
  };

  useEffect(() => {
    socket.emit("join room", roomId);
  }, []);

  useEffect(() => {
    socket.on("new message", (currentMsg: NewMessage) => {

      if (newMessages.current.length === 1 && !newMessages.current[0].userName) {
        newMessages.current = [currentMsg];

        countNewMsg(newMsgNO + 1);

      } else {
        newMessages.current.push(currentMsg);

        countNewMsg(newMsgNO + 1);

      }

      countNewMsg(newMsgNO + 1);

      console.log("newMsgNO: ", newMsgNO);
      console.log("newMessages.current: ", newMessages.current);

    });
  }, []);

  return (

        ...

      {newMsgNO > 0 &&
        newMessages.current.map((_, idx) => (
          <MessageRecord key={_.userName + idx.toString} message={_} />
        ))}

      <button onClick={testMessage}>testMessage</button>

       ...
  );

Answer 1

我明白了！多亏了前端开发的开放聊天室的“뚜아아아”。

countnewmsg（（（prev）=＆gt; prev + 1）;这就是与此有关的。

  useEffect(() => {
    socket.on("new message", (currentMsg: NewMessage) => {

      if (newMessages.current.length === 1 && !newMessages.current[0].userName) {
        newMessages.current = [currentMsg];
      } else {
        newMessages.current.push(currentMsg);
      }

      countNewMsg((prev) => prev + 1);

      console.log("newMsgNO: ", newMsgNO);
      console.log("newMessages.current: ", newMessages.current);

    });
  }, []);

由于异步逻辑，我以前的尝试无效。
因此，我像同步设计一样使其正常工作。 （prev）=＆gt; prev + 1

和当SetState设置了多次，只有最后一个设置。
因此，我在条件下删除了它们。因为它们是进行测试的，现在没有必要，因此不需要对此进行额外的工作。

我很高兴能解决这个问题。
晚安大家！