在useImperativeHandle中使用useState，首次调用无法更新状态

问题原因 #

1. useState更新的异步性：调用toggleShowPop(true)后，showPop不会立刻同步更新，要等到React完成下一次渲染才会更新为新值。
2. useImperativeHandle依赖不当：你把showPop加入了useImperativeHandle的依赖数组，导致每次showPop变化都会重新生成暴露给父组件的对象。但父组件调用show方法后立刻访问暴露的showPop，拿到的还是当前渲染周期的旧值，这会造成“状态没更新”的误解。

解决方案 #

1. 优化useImperativeHandle的依赖

移除依赖数组中的showPop，因为useState返回的更新函数toggleShowPop是稳定的（不会随渲染变化），不需要依赖showPop就能正确触发状态更新。同时不要在暴露的对象中返回showPop，避免父组件读取到旧状态。

2. 通过回调同步状态给父组件（可选）

如果父组件需要知晓子组件的状态变化，不要通过ref直接读取，而是通过props传递回调函数，在子组件的useEffect中触发回调传递最新状态。

修改后的代码示例 #

const [showPop, toggleShowPop] = useState(false);
// 父组件可通过props传入回调，接收子组件状态变化
const { onPopStateChange } = props;

useImperativeHandle(ref, () => ({
  hide: () => {
    toggleShowPop(false);
  },
  show: () => {
    toggleShowPop(true);
  }
}), []); // 空依赖数组，因为toggleShowPop是稳定函数

useEffect(() => {
  console.log('showPop', showPop); // 状态更新后会触发，打印最新值
  // 通知父组件最新状态
  onPopStateChange?.(showPop);
}, [showPop, onPopStateChange]);

补充说明 #

• 调用show方法后，useEffect会在React完成下一次渲染后触发，此时能正确打印更新后的showPop值。
• 父组件如果需要基于子组件状态做操作，通过回调函数接收状态是最可靠的方式，避免异步更新带来的旧值问题。

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