带空数组的 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 可扩展 class，我无法使用该方法。

对此有什么好的、简单的解决方案吗？

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);
}, []);

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

UseState in useEffect hook with empty array (for socket.io.on)

socket.io

react-hooks