React Hooks:在Socket.io处理程序内部调用时，状态未更新

Question

const [questionIndex, setQuestionIndex] = useState(0);
...
socket.on('next', () => {
console.log('hey')
setQuestionIndex(questionIndex + 1);
});
...

useEffect(() => {
console.log(questionIndex);
}, [questionIndex]);

我有一个使用Socket.io连接到网络套接字的页面。当我从套接字收到"下一个"消息时，我正试图更新questionIndex状态变量的值。我收到这条消息似乎是因为打印了"嘿"，但questionIndex只在第一个"嘿"之后更新。之后，hey被打印出来，但questionIndex没有(当它更新时，我使用useEffect打印questionIndex(。你们看到什么不对吗？

Answer 1

我也面临这个问题。实际上，在更新时，我们不应该依赖于状态中的值。

正确的方法是

setQuestionIndex(QuestionIndex=>QuestioIndex+1)

Answer 2

对于那些想知道的人来说，socket.on('next'(函数处理程序每次都使用questionIndex的原始值(0(。函数处理程序似乎是在绑定该变量时编译该变量，而不是在运行时读取该变量。不确定它在文档中的何处指定了此行为。

我的解决方案是这样更改函数处理程序：

socket.on('next', (newIndex) => {
console.log('hey')
setQuestionIndex(newIndex);
});

这通过提供将questionIndex设置为的值(而不是在接收到"下一个"事件时读取该值(来解决问题。

Answer 3

看起来每次渲染都会打开新的套接字，并且永远不会断开它。尝试将socket.on放置在useEffect中，该useEffect的返回值将是断开套接字连接的函数。

useEffect(() => {
socket.on('next', () => {
console.log('hey')
setQuestionIndex(questionIndex + 1);
});
return () => socket.disconnect();
}, [questionIndex]);```