React 复选框组未随状态更新

Question

您好，我正在为复选框组使用此状态

  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);
  };

最后列表正在更新，但复选框值没有随之改变

Answer 1

在您的 filterScheduleData 中，您需要在修改之前复制 socialList：

const checkboxes = [...socialLists];

否则，您只是在创建对 socialList 数组的引用，您不能直接更改它，因为它是状态

React 复选框组未随状态更新

React checkbox group is not being updated with the state

checkbox

reactjs

react-state-management

react-hooks