为什么我的React应用中两个点击事件会同时触发？

核心问题1：嵌套状态更新逻辑错误 #

React 的 setState 仅对状态的第一层属性做浅合并，你当前更新userToggleSettings时，直接传入仅包含单个修改字段的新对象，会直接覆盖原有的userToggleSettings完整对象，导致未修改的配置字段直接丢失。比如调用切换级联面板的方法后，userToggleSettings里就只剩cascadingPanels一个字段，includeAttachments字段被删除，Switch 组件接收到 undefined 类型的 checked 值就会默认表现为未选中，看起来就是两个开关一起触发了切换。

修复方案：更新嵌套对象时先展开原有配置的所有字段，再覆盖需要修改的字段：

toggleIncludeAttachments = () => {
    this.setState((prevState) => ({
        userToggleSettings: {
            ...prevState.userToggleSettings,
            includeAttachments: !prevState.userToggleSettings.includeAttachments
        }
    }));
};

toggleCascadingPanels = () => {
    this.setState((prevState) => ({
        userToggleSettings: {
            ...prevState.userToggleSettings,
            cascadingPanels: !prevState.userToggleSettings.cascadingPanels
        }
    }));
};

核心问题2：事件绑定位置错误导致重复触发 #

你当前把点击事件绑定在了 Switch 外层的 div 上，大部分 UI 库的 Switch 组件自身就内置了点击/切换事件，点击 Switch 时事件会向上冒泡，触发外层 div 绑定的切换函数，可能导致单个点击动作触发两次切换逻辑，进一步引发状态异常。

修复方案：把切换事件绑定到 Switch 组件的 onChange 属性上，同时阻止事件冒泡：

<div className='child-component-container'>
    <div className={'user-settings-toggle'}>
        <div className={'user-settings-label'}>
                {props.translations.CASCADING_PANELS}
            </div>
        <Switch
            checked={props.cascadingPanelsSwitchValue}
            onChange={(e) => {
                e.stopPropagation();
                props.cascadingPanelsSwitchHandler();
            }}
            translations={{
                off: props.translations.off,
                on: props.translations.ON
            }}
            />
    </div>
    <div className={'user-settings-toggle'}>
        <Switch
            checked={props.attachmentsSwitchValue}
            onChange={(e) => {
                e.stopPropagation();
                props.attachmentsSwitchHandler();
            }}
            translations={{
                off: props.translations.off,
                on: props.translations.ON
            }}
        />
        <div className={'user-settings-label'}>
            {props.translations.ALWAYS_INCLUDE_ATTACHMENTS}
        </div>
    </div>
</div>

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