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

Question

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

配置：

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

聊天组件：

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) 始终打印一个空数组。

我尝试使用 Context 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]
    }
});