无法从 socket 事件处理函数中访问 React 状态

Question

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

配置：

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，但仍然没有帮助。有没有办法访问React状态。先谢谢了。

- Rahul Jain

---

请添加您的代码 - Babak Yaghoobi

Answer 1

这篇文章详细阐述了如何在事件监听器中使用useState和useRef hooks访问React状态：

https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

该文章还引用了以下帖子：

React useState hook event handler using initial state

2021年React函数组件的更新

const [chats, setChats] = useState([])

...

socket.on('message', function (messageData) {
    
    setChats((prev) => {
        return [chat, ...prev]
    }
});

- user2414355