在功能组件的内部函数中无法访问上下文值

Question

我正试图构建一个组件，该组件接收任意大的项目列表，并一次显示其中的一大块。当用户向下滚动窗口时，我想自动加载更多的项目(如果有的话(。

我遇到的问题是，我的appState变量的作用不一致。当我在组件顶部记录它时，它总是从加载的上下文中读取正确的值。但是，当我读取onScroll函数内部的值时，它总是返回默认的未初始化状态。我的上下文在内部函数上去了哪里？

这是一个精简版，说明了我的问题：

组件

import { useContext } from 'react'
import { useLifecycles} from 'react-use'
import AppState from '../../models/AppState'
import { Context } from '../../store/create'
export default () => {
const appState:AppState = useContext(Context)
console.log('appState.items (root)=', appState.items.length) // Returns `100`, as it should
useLifecycles(
() => {
window.addEventListener('scroll', onScroll)
},
() => {
window.removeEventListener('scroll', onScroll)
}
)
const onScroll = (evt:any) => {
console.log('appState.items (onScroll)', appState.items.length) // Returns `0` (the default uninitialized state).
}
return (
<div className='ItemList'>
<h1>Hello world</h1>
{/* The list of items goes here */}
</div>
)
}

..//存储/创建

import React from 'react'
import AppState, { getDefaultState } from '../models/AppState'
let state:AppState = getDefaultState()
export const Context:React.Context<AppState> = React.createContext<AppState>(state)
export const setAppState = (newState:AppState):void => {
_state = newState
}
export const getAppState = ():AppState => {
return _state
}

我读过钩子的规则，据我所知，我没有违反任何规则。我的useContext和useLifecycle调用在顶部按固定顺序排列；没有条件句，就没有循环。

我错过了什么？

Answer 1

我不知道useLifecycles是如何工作的。但我可以看到的问题是，您正在将事件绑定为函数。该函数的闭包中有状态，因此它捕获状态的值。每当状态发生变化时，处理程序都不会意识到状态的变化，因此它只会继续使用以前捕获的数据。现在要解决这个问题，您需要侦听状态更改并删除以前附加的侦听器，添加在其闭包中具有新值的新侦听器。我认为useLifecycles应该有一个依赖选项来实现这一点。如果没有，另一种方法可以是使用useEffect钩子。

编辑：我刚刚查看了react-use文档，发现您真正需要的是useEvent。看看文档中的示例。为了确保它在您的情况下有效，您应该在useCallback中传递您的依赖项。