React+Socket.io场景下useSelector获取Redux默认状态问题排查

解答 #

1. 场景A的原因 #

这是闭包捕获值的特性导致的。你在useEffect里注册cardFlippedHandler时，这个函数捕获的是组件初次渲染时的stateRoom和stateSocketId——也就是game slice的初始默认值（空字符串或你改的"default"）。

因为你的useEffect依赖数组只有socket，当组件后续因game slice状态更新而重新渲染时，这个useEffect不会重新执行，所以Socket.io注册的始终是初次渲染时创建的旧版cardFlippedHandler，它内部的状态值永远是初次渲染时的默认值。

而auth slice的stateUsername在初次渲染时就已经是正确的"John"，且后续没有变化，所以闭包里捕获的这个值一直是正确的，打印结果正常。

2. 场景B的差异原因 #

当你通过按钮onClick调用cardFlippedHandler时，调用的是组件当前渲染周期里的最新版本函数。

组件每次重新渲染（比如game状态更新后），都会重新创建一个新的cardFlippedHandler，这个新函数会捕获当前最新的Redux状态（包括已经更新后的stateRoom和stateSocketId）。按钮点击时触发的是这个最新的函数，所以能打印出正确的状态值。

内容的提问来源于stack exchange，提问作者Alinferno