Группа флажков «Реагировать» не обновляется в соответствии с состоянием

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, который вы не можете изменить напрямую, потому что это состояние