我有多个复选框，当我点击一个复选框然后点击下一个时，前一个复选框会被取消选择，你知道为什么吗？
这是我的复选框组件：
const Checkbox = ({ key, id, label, checked, name, onChange }:any) => { return ( ) } 这是主要组件的样子，数据存在一个数组中，然后被映射出来，但我不确定为什么它会取消选择前一个复选框，我已经删除了很多其他无用的JSX代码：
const checkboxList = [ { id:0, label:"大写", name: "upper", checked:false }, { id:1, label:"小写", name: "lower", checked:false }, { id:2, label:"数字", name: "number", checked:false }, { id:3, label:"符号", name: "symbols", checked:false } ] const PasswordGenerator = () => { const [data, setData] = useState(checkboxList) const handleChange = (id:number) => { const updateCheckboxes = checkboxList.map((checkbox) => checkbox.id === id ? {...checkbox, checked: !checkbox.checked}:checkbox) setData(updateCheckboxes) } return ( {data.map((obj) => { return( handleChange(obj.id)} /> ) })} ) } 
当你更新状态时，你是从原始数组而不是当前状态进行更新的。而不是从原始数组（checkboxList）进行映射，而是从状态的当前值（data）进行映射：
const handleChange = (id:number) => { const updateCheckboxes = data.map((checkbox) => checkbox.id === id ? {...checkbox, checked: !checkbox.checked}:checkbox) setData(updateCheckboxes) }