React.js父子组件状态通信失效问题排查

结合你描述的场景，状态未更新的问题大概率出在以下几个常见环节，逐一排查即可解决：

1. useEffect 依赖数组缺失导致捕获旧状态 #

如果父组件的 useEffect 没有把 demoOpen 加入依赖项，它会一直保留初始渲染时的状态闭包，打印的始终是初始值 true。

修复方式：

useEffect(() => {
  console.log('demoOpen:', demoOpen);
}, [demoOpen]); // 必须将demoOpen加入依赖数组，才能监听状态变化

2. 状态更新未用函数式写法（闭包陷阱） #

如果你的 onKeep 回调是在某个闭包环境中创建的，直接赋值式更新可能会捕获旧状态。尤其是当状态更新依赖之前的状态值时，必须用函数式更新：

错误写法：

const onKeep = () => {
  setDemoOpen(false); // 若处于旧闭包中，可能无法正确更新
};

正确写法：

const onKeep = () => {
  setDemoOpen(prevState => false); // 或根据需求写prevState => !prevState
};

3. 子组件按钮 onClick 绑定错误 #

检查子组件中按钮的点击事件是否提前执行了回调，而非绑定函数引用：

错误写法：

<button onClick={props.onKeep()}>取消</button> // 这里直接调用了函数，组件渲染时就会执行

正确写法：

// 无需额外参数时直接传引用
<button onClick={props.onKeep}>取消</button>
// 需要额外参数时用箭头函数包裹
<button onClick={() => props.onKeep(额外参数)}>取消</button>

4. 回调函数传递错误 #

确认父组件传递给子组件的 onKeep 确实是用于更新状态的函数，而非状态值本身：

错误写法：

<Demo4 onKeep={demoOpen} /> // 传了状态值，不是更新函数

正确写法：

<Demo4 onKeep={onKeep} /> // 传递提前定义好的回调函数
// 或直接传递状态更新函数
<Demo4 onKeep={() => setDemoOpen(false)} />

排查步骤建议 #

1. 先补全 useEffect 的依赖数组，确认能正确监听状态变化；
2. 检查子组件按钮的 onClick 绑定方式，避免提前执行回调；
3. 改用函数式状态更新写法，规避闭包陷阱；
4. 打印父组件传递的 onKeep，确认是函数而非状态值。

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