React useState更新异常：closeEditorData触发后editorDataOpen未置为false

观测到的异常表现 #

• 通过 useState 定义的 editorDataOpen 状态，调用 openEditorData 将其设为 true 时，功能逻辑完全正常
• 调用 closeEditorData 将其设为 false 时更新失效：控制台已成功打印 「Entering Profile > closeEditorData()」 日志，证明 closeEditorData 函数已被正常触发
• 完整运行流程的日志观测结果：
  1. 组件初始渲染时，editorDataOpen 初始值为 false，日志输出正常
  2. 经过多轮组件重渲染后，点击页面触发 openEditorData，状态正常更新为 true，编辑器成功打开
  3. 点击编辑器关闭按钮触发 closeEditorData 时，虽然函数触发日志正常打印，但始终观测不到状态更新为 false 的预期日志输出，状态没有完成更新

问题根因 #

点击 EditorProfileData 组件的关闭按钮时，触发的点击事件未做冒泡阻断，沿DOM树向上冒泡后触发了外层 ContainerGrid 绑定的 openEditorData 事件。
同一点击事件的完整执行链路为：

1. 关闭按钮被点击 → 触发 closeEditorData，执行 setEditorDataOpen(false)
2. 未被阻断的点击事件持续向上冒泡 → 触发外层容器绑定的 openEditorData，紧接着执行 setEditorDataOpen(true)
   两次状态更新被React归入同一事件循环的批量更新队列，最终渲染时的状态值始终为 true，从外部观测就表现为“closeEditorData设置false不生效”。

同页面的 editorImageOpen 状态运行正常的原因：对应的 ImageCapsule 组件内置了ClickLayer拦截层，会拦截自身的点击事件避免向上冒泡，不存在上述连锁触发的问题。

最终修复方案 #

• 移除 ContainerGrid 组件本身的 onClick 事件绑定
• 在 ContainerGrid 内部新增独立的 ClickLayer 组件，将 openEditorData 的点击事件绑定迁移到 ClickLayer 上，依靠ClickLayer的事件拦截能力切断冒泡链路
  调整后的核心代码片段：

<ContainerGrid
    width = '100%'
    justify = {s.justify.center}
    // 移除原先绑定在容器上的onClick事件
    $clickable
>
    <ClickLayer
        onClick = {openEditorData}    
    />
    <Table
        $nomouse
        width = '100%' 
        data = {parsedData}
        settings = {{ /* 原有配置保持不变 */ }}
    />
    {editorDataOpen &&
        <EditorProfileData
            open = {editorDataOpen}
            close = {closeEditorData}
            width = {getEditorWidth(1, c.cardsPerRow, c.card.width, s.spacing.default)}
            header = {{ text: 'Edit Profile Data' }}
            data = {unparsedData}
        />
    }
</ContainerGrid>

修复完成后，点击编辑器关闭按钮时的事件冒泡链路被完全阻断，editorDataOpen 的状态更新逻辑恢复正常。

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