嗨,我将此状态用于复选框组
const [ socialLists, setSocialList ] = useState([]);
useEffect(() => {
setSocialList([
{ name: 'Facebook', checked: true },
{ name: 'Twitter', checked: true },
{ name: 'Instagram', checked: true }
]);
}, []);
该复选框最初处于选中状态,我正在使用复选框上的onChange函数来更新状态,但是checked
的值尚未更新。
这是我的jsx
<FormGroup row>
{socialLists.map((social) => (
<FormControlLabel
key={social.name}
control={
<CustomCheckbox value={social.name} checked={social.checked} onChange={filterScheduleData} />
}
label={social.name}
/>
))}
</FormGroup>
这是onChange函数
const filterScheduleData = (event, checked) => {
const checkboxes = socialLists;
checkboxes.forEach((i) => {
if (i.name === event.target.value) {
i.checked = checked;
}
});
setSocialList(checkboxes);
};
最后,列表将被更新,但复选框值不会随之更改
答案 0 :(得分:2)
在filterScheduleData中,您需要在复制社交列表之前对其进行复制:
const checkboxes = [...socialLists];
否则,您只是在创建对socialList数组的引用,由于它是状态,因此无法直接更改