useReducer更新状态成功但组件内函数无法获取最新状态问题排查

这个问题属于React Hooks的闭包陷阱，根因如下：

• 你使用的useEffect依赖数组为空，只会在组件首次挂载时执行一次，此时绑定的handleScroll是首次渲染生成的函数，该函数捕获的是首次渲染时的状态快照，也就是初始的initialState。
• 后续组件状态更新触发重渲染时，会生成新的handleScroll、search函数，这些新函数可以拿到最新的状态值，但你绑定的滚动事件监听始终指向首次渲染的旧函数，因此永远只能读取到初始状态，看起来就像状态每次重渲染都会被重置。

• 方案1：调整useEffect依赖项，将handleScroll加入依赖数组，每次函数更新时重新绑定滚动事件。同时将search函数用useCallback包裹，把函数内部用到的状态变量（如state.offset、state.limit等）加入useCallback的依赖数组，避免不必要的重复绑定。
• 方案2：用useRef存储最新状态，每次状态更新时同步到ref.current，在handleScroll中直接读取ref.current即可拿到最新状态，不需要调整事件绑定逻辑。
• 方案3：如果仅需要在事件回调中触发状态更新，也可以使用reducer的函数式更新逻辑，不需要直接读取当前状态。

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