无法从套接字事件处理函数访问反应状态

Question

我有一个react应用程序，我使用套接字。用于实时消息传递的IO。我试图在所有反应功能组件中使用通用套接字对象，但在事件处理程序函数中，我无法访问状态对象。

配置:

var socket = io(socketEndPoint)
socket.emit('register', cookies)
export { socket }

ChatComponent:

import {socket} from './Config'
export default function ChatComponent(props) {
const [chats, setChat] = React.useState([{chat_id: 1234}])
socket.on('message', (data) => {
console.log(data)
console.log(chats)
})
}

console.log(chats)总是打印一个空数组。

我尝试使用上下文Api，但仍然没有帮助。有没有办法得到反应状态。提前谢谢。

Answer 1

这篇文章似乎详细阐述了答案:https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

也引用了这篇文章:

使用初始状态响应useState钩子事件处理器

更新2021 react功能组件

const [chats, setChats] = useState([])
...
socket.on('message', function (messageData) {

setChats((prev) => {
return [chat, ...prev]
}
});