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中，您需要在复制社交列表之前对其进行复制：

const checkboxes = [...socialLists];

否则，您只是在创建对socialList数组的引用，由于它是状态，因此无法直接更改

React复选框组未使用状态更新

1 个答案: