空数组的 useEffect 钩子中的 UseState（用于 socket.io.on）

Question

目前我有以下代码：

export default function Chat() {
    const [chat, setChat] = useState({ ID: 0, messages: [] })
    const {socket} = useContext(SocketContext)

    useEffect(() => {
        socket.on('/chat', (message) => {
            setChat({...chat, messages: [...chat.messages, message] }
            //Some other interaction with variables inside this Chat function (eg: document.getElementById)
        }
    }, [])
 
    return <div>{chat.toDivs()}</div>
}

但这并没有按预期工作，因为 useEffect 总是使用相同的 chat 值。因此，在 /chat 上接收消息的结果将始终是 [message] 而不是 [...prevMessages, message]。

我搜索过这个问题，有人建议使用 componentDidMount()，但是由于我没有使用 React.Component 可扩展类，所以我不能使用该方法。

有什么好的，简单的解决方案吗？

Answer 1

使用功能状态更新，以便您从之前的状态进行更新而不是在回调范围内关闭的状态值。

卸载时不要忘记取消订阅以清理资源。

const [chat, setChat] = useState({ ID: 0, messages: [] });

useEffect(() => {
  const onChat = (message) => {
    setChat(chat => ({
      ...chat,
      messages: [...chat.messages, message],
    }));
  };

  socket.on('/chat', onChat);

  return () => socket.off('/chat', onChat);
}, []);