React中点击新复选框后原复选框自动取消选中的问题排查

问题原因 #

核心错误是**handleChange函数始终基于初始的checkboxList数组更新状态**，而非当前state中保存的data数组。每次点击复选框时，都会从所有复选框未选中的初始状态开始修改，导致之前选中的项被重置为false，表现为自动取消选中。

另外还有两处冗余问题：

• Checkbox组件的<input>标签添加了multiple属性，该属性仅对<select>或<input type="file">有效，对checkbox完全无用。
• Checkbox组件接收了key参数但未使用，React的key应放在组件最外层元素上（你已在主组件的<div>上设置key={obj.id}，此处key参数可删除）。

修复方案 #

1. 修正状态更新的数据源 #

将handleChange中的checkboxList.map改为基于当前state的data数组更新：

const handleChange = (id: number) => {
  const updateCheckboxes = data.map((checkbox) => 
    checkbox.id === id ? {...checkbox, checked: !checkbox.checked} : checkbox
  )
  setData(updateCheckboxes)
}

2. 清理Checkbox组件冗余代码 #

移除无用的key参数和multiple属性：

const Checkbox = ({ id, label, checked, name, onChange }: any) => {
  return (
    <div className="checkbox-wrapper">
      <input id={id} type="checkbox" checked={checked} name={name} onChange={onChange} />
      <label htmlFor={id}>{label}</label>
    </div>
  )
}

3. 可选：优化类型定义（推荐） #

将Checkbox的props类型从any改为具体类型，提升代码可读性与类型安全：

type CheckboxProps = {
  id: number;
  label: string;
  checked: boolean;
  name: string;
  onChange: () => void;
}

const Checkbox = ({ id, label, checked, name, onChange }: CheckboxProps) => {
  // 组件内容不变
}

修复后的完整主组件代码 #

const checkboxList = [
  { id: 0, label: "upperCase", name: "upper", checked: false },
  { id: 1, label: "lowerCase", name: "lower", checked: false },
  { id: 2, label: "numbercase", name: "number", checked: false },
  { id: 3, label: "symbolcase", name: "symbols", checked: false }
]

const PasswordGenerator = () => {
  const [data, setData] = useState(checkboxList)

  const handleChange = (id: number) => {
    const updateCheckboxes = data.map((checkbox) => 
      checkbox.id === id ? {...checkbox, checked: !checkbox.checked} : checkbox
    )
    setData(updateCheckboxes)
  }

  return (
    <div className="elements">
      {data.map((obj) => (
        <div key={obj.id}>
          <Checkbox
            id={obj.id}
            label={obj.label}
            checked={obj.checked}
            name={obj.name}
            onChange={() => handleChange(obj.id)}
          />
        </div>
      ))}
    </div>
  )
}

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