React函数组件状态管理异常排查及自定义状态管理Hook合理性咨询

核心问题：闭包导致的过时状态（Stale Closure） #

你遇到的情况完全是闭包问题，和React本身无关，是代码里的闭包捕获了过时的状态引用。

具体来说，你的view函数定义在TeamsPage组件内部，但没有用useCallback包裹，也没有被加入listing的useMemo依赖数组。当组件首次渲染时，view捕获了当时的manager实例（此时模式是默认的View）；之后当你切换到Edit模式，组件会重新渲染，生成新的manager实例，但Listing组件因为useMemo的依赖数组里没有view，所以仍然使用第一次渲染时的view函数——这个旧函数里的manager.mode永远是初始的View，自然会绕过你的条件判断执行setId。

另外，你的useEffect里直接调用manager.setId(first.id)，但setId方法本身没有检查当前模式，所以即使处于Edit/Add模式，这个useEffect也会修改id，这也违反了你设定的规则。

关于自定义Hook的视图管理方式 #

用自定义Hook封装页面状态和操作的方式是非常合理的，这是React社区推荐的状态逻辑复用方案，能让组件代码更简洁，状态逻辑更集中可控。你这个Hook的设计思路没问题，只是细节上有疏漏。

具体修复步骤 #

1. 修复view函数的闭包问题 #

用useCallback包裹view函数，并将其加入listing的useMemo依赖数组：

const view = useCallback((id: number) => {
  manager.debug(`before`)
  if (manager.mode === Modes.View) {
    manager.setId(id)
    manager.debug(`after`)
  }
}, [manager]) // 加入manager作为依赖，确保每次manager更新时，view函数也更新

const listing = useMemo(() => {
  const { rows, count } = data ?? { rows: [], count: 0 } as TeamSummary
  const t0 = (
    <Listing
      data={rows}
      page={manager.grid.page}
      size={manager.grid.size}
      count={count}
      onSelect={(arg) => view(arg.id) }
      onAdd={() => manager.enterAddMode()}
      onEdit={(arg) => manager.enterEditMode(arg.id)}
    />
  )
  return t0
}, [data, view]) // 把view加入依赖数组

2. 完善setId方法，确保只有View模式能修改id #

在usePageManager的setId里加上模式判断，从根源上阻止非View模式下的id修改：

setId(id: number) {
  if (!isEditing()) { // 只有非编辑状态才能修改id
    setState(previous => produce(previous, x => { x.id = id }))
  }
}

这样不管是view函数还是useEffect里调用setId，都会遵守规则，避免意外修改。

3. 简化enterViewMode逻辑（可选） #

你的enterViewMode里重复了change函数的判断逻辑，可以直接复用change函数，减少冗余：

enterViewMode(id?: number){
  change(id, Modes.View)
}

4. 检查change函数的参数处理 #

change函数的teamId参数是可选的，进入Edit模式时传入了id，但要确保状态更新时正确赋值：

const change = (teamId?: number, mode: Modes = Modes.View) => {
  if (!isEditing()) {
    setState(current => produce(current, x => {
      if (teamId !== undefined) x.id = teamId // 明确判断undefined，避免0被忽略
      x.mode = mode
    }))
  }
}

额外建议 #

• 可以在usePageManager里把isEditing暴露出来，或者在setId、change等方法里统一处理模式判断，避免在组件里重复判断，减少出错概率。
• 用immer的produce来更新状态是很好的做法，能让嵌套状态的更新更简洁。

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