React中用useState存储组件时状态不更新的原因咨询

核心问题出在闭包捕获和React useState 的初始化特性上：

• 当你用 const [data] = useState({ child: <Child /> }) 时，useState 的初始化逻辑只会在组件第一次渲染时执行一次，后续组件重渲染时不会再重新创建这个 data 对象，自然也不会生成新的 <Child /> 组件实例。
• 第一次渲染时，add 函数里的 current 是初始值 0，<Child> 的点击回调绑定的正是这个初始版本的 add 函数——闭包特性让它永远捕获着第一次渲染时的 current=0。后续点击调用 setCurrent 触发组件重渲染，但 data 里的 <Child> 还是第一次渲染的那个实例，它的点击回调依然指向旧的 add 函数，所以控制台永远输出 0。

对比不用 useState 存 data 的情况：

• 每次组件重渲染时，都会重新执行 const data = { child: <Child /> }，生成全新的 <Child /> 组件实例。这个新实例的点击回调会绑定当前渲染周期的 add 函数，而此时的 add 函数捕获的是最新的 current 值，所以点击时能正确输出递增后的数值。

修复方案（可选） #

如果需要保留 useState 存储 data 的逻辑，同时让点击正常工作，可以从两个方向调整：

1. 使用函数式更新：绕过闭包对旧值的捕获，直接获取最新状态进行更新：

const add = () => {
  console.log(current) // 这里仍会显示旧值，但状态会正确更新
  setCurrent(prev => prev + 1) // 通过函数参数获取最新状态
}

2. 强制Child感知状态变化：用 useCallback 包裹 add，并让 <Child> 依赖这个回调，确保状态更新时Child能重新渲染：

const add = useCallback(() => {
  console.log(current)
  setCurrent(current + 1)
}, [current])

const [data] = useState({
  child: <Child add={add} />
})

// 修改Child组件接收props
const Child = ({ add }) => {
  return <div onClick={add}>Child</div>
}

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