在 useEffect 中监听套接字事件没有得到最新消息答案

【问题标题】：Listening socket event in useEffect does not get latest messages在 useEffect 中监听套接字事件没有得到最新消息
【发布时间】：2021-07-19 21:58:32
【问题描述】：

我正在开发一个 React Js 公告组件，该组件在从后端推送时显示新公告。我正在实时使用 Socket IO。

所以我的代码看起来像这样：-

 const [ announcements, setAnnouncements ] = useState([])

 useEffect(() => {
    let socket = SocketIO.connect(ENDPOINT);
    setSocket(socket);

    socket.on("newAnnouncement", (message) => {
      setAnnouncements( [ message, ...announcements ] )
    });

    axios
      .get(getAnnouncementURL)
      .then((res) => {
        setAnnouncements(res.data.reverse());
      })
      .catch((err) => console.log(err));
  }, []);

上面代码中的问题是我在第一次渲染时监听事件，所以公告数组是空的。因此，对于套接字获得的每个新公告，这个 ([ message, ...announcements ]) 变为 [ message ] （因为公告是空的）并且我的所有以前的公告被刷新，我只看到新消息

【问题讨论】：

试试setAnnouncements(prev => [ message, ...prev ] )

标签： reactjs socket.io components

【解决方案1】：

将您的代码更改为

setAnnouncements(prev =>  [ message, ...prev ] )

【讨论】：