React复选框点击后不保持选中状态疑似死循环问题求助

问题根因 #

• 子组件EmittersComponent嵌套定义在父组件内部，父组件每次重渲染都会重新生成组件引用，导致所有子组件强制卸载重建，内部维护的checked状态直接重置为初始值false
• 子组件内部的checked本地状态和父组件的searchUser真实选中数据完全独立，没有做同步，选中状态和实际过滤条件不一致
• 复选框onChange事件逻辑冗余错误：先执行setChecked(checked)将状态重置为原值，即使后续做取反操作也会出现状态更新冲突
• 使用数组索引作为组件key，数组顺序变化时会触发组件实例复用/重建，导致内部状态丢失

修复方案 #

步骤1：调整子组件定义，改为受控组件 #

将EmittersComponent移到父组件外部定义，移除内部本地checked状态，改为从父组件接收checked属性作为唯一选中依据，删除冗余的状态更新逻辑：

// 注意：该组件要定义在父组件外部，不要嵌套在父组件代码内
const EmittersComponent: React.FC<PropsButton & { checked: boolean }> = ({ label, onSelect, checked }) => {
  function handleSelect() {
    onSelect(label)
  }

  return (
    <div className="grid grid-cols-3 gap-3 lg:grid-cols-2">
      <li className="mt-4 flex items-start">
        <div className="flex items-center h-5">
          <input
            type="checkbox"
            onChange={handleSelect}
            checked={checked}
            className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
          />
        </div>
        <div className="ml-3 text-sm">
          <span className="font-medium text-gray-700">
            {label || 'Sem nome'}
          </span>
        </div>
      </li>
    </div>
  )
}

步骤2：修正渲染逻辑，同步选中状态 #

修改父组件内的列表渲染逻辑，给子组件传入和searchUser对齐的checked值，同时替换索引key为唯一标识：

// 父组件内的列表渲染逻辑
const emittersComponent = () => (
  <div>
    {emittersData.map((value: any) => {
      const label = value.Attributes[2]?.Value
      return (
        <EmittersComponent
          key={label} // 若label不唯一可替换为数据中的唯一ID字段，仅兜底场景用index
          label={label}
          onSelect={handleToggle}
          checked={searchUser.includes(label)} // 选中状态和父组件过滤条件完全同步
        />
      )
    })}
  </div>
)

优化说明 #

改造后复选框的选中状态完全由父组件的searchUser统一管理，不存在父子组件状态不一致的问题，同时子组件不再嵌套定义避免了重复销毁重建的性能损耗和状态丢失问题，原有过滤逻辑无需修改即可正常和选中状态联动。

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