ReactJS切换按钮重复渲染问题求助

问题现象 #

预期仅显示1个切换按钮（参考截图：），但实际页面中渲染出了2个重复的按钮（参考截图：）。

排查方向 #

结合你提供的代码片段和完整组件代码，从以下两个核心方向排查：

1. 入口文件的重复组件调用 #

检查入口文件中对Toggle组件的渲染逻辑，是否存在**多次调用<Toggle />**的情况：

• 比如是否在循环、if-else条件分支中意外重复渲染了组件
• 或者父组件的状态更新逻辑导致组件被多次实例化

2. 组件内部的重复元素输出 #

查看完整按钮组件的JSX结构，确认是否在组件的return语句中多次渲染了<input type="checkbox" />元素：

• 比如是否存在两处输出该隐藏checkbox的代码
• 或者通过循环、数组映射生成了多个checkbox实例

修复方案 #

针对入口重复渲染 #

找到入口文件中重复渲染Toggle组件的代码，删除多余的调用，确保仅渲染一次组件实例。

针对组件内部重复元素 #

清理组件JSX中多余的<input>元素，确保return语句里仅保留一个checkbox的渲染逻辑。

代码优化建议 #

针对你提供的checkbox代码，可简化onChange逻辑（受控组件中无需额外判断值是否变化）：

<input
    type="checkbox"
    id={`toggle-${data.value}`}
    value={data.value}
    checked={data.value === value}
    onChange={() => onChange(data.value, data)}
    className={tw("hidden")}
    disabled={disabled || data.disabled || data.loading}
/>

如果组件是在列表中渲染，务必给组件添加唯一的key属性，避免React复用组件导致的异常渲染。

内容的提问来源于stack exchange，提问作者Arbi Dwi Wijaya