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上接收消息的结果将始终是[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);
}, []);