处理多个复选框Reactjs不工作

Question

我正在尝试用reactjs创建多个复选框。但它不起作用我做错了什么？我有一个设置为false的状态数组来选中每个复选框。我认为它有效，但它不起作用我该怎么修复它？

谢谢！

const GridResource = (resources) => {
const [checked, setChecked] = useState([...Array(6)].map(x=>false));
const handleCheckboxChange = (index) => {
checked[index] = !checked[index];
setChecked(checked);
};

const rows = [];
resources.map((resource, index)=> {
rows.push(
<HeaderTable >
<ChecboxGrid>
<label>
<Checkbox
checked={checked[index]}
onChange={()=> handleCheckboxChange(index)}
/>
</label>
</ChecboxGrid>
<TagElement> {resource.firstName}</TagElement>
<TagElement title={true}> {resource.lastName} </TagElement>
<TagElement title={true}> {resource.jobtitle} </TagElement>
</HeaderTable>
)
});
return (
<Container>
<HeaderTable>
<ChecboxGrid>
<label>
<Checkbox
checked={checked}
onChange={handleCheckboxChange}
/>
</label>
</ChecboxGrid>
</HeaderTable>
{rows}
</Container>
)
};

Answer 1

不要改变状态，创建一个副本以便React可以重新渲染

const handleCheckboxChange = (index) => {
const copy = [...checked];
copy[index] = !copy[index];
setChecked(copy);
};