Флажок пользовательского интерфейса материала жалуется на неконтролируемый

Question

Я использую комплект UI для React.Я делаю флажки динамически из состояний и обновляю их,

Но я получаю неконтролируемую ошибку элемента.

this.state = {
    services : [{service: "s1", value: false},
                {service: "s2", value: false},
                {service: "s3", value: false},
               ]
};

handleServiceCheck = (i) => {
    let services = this.state.services;
    services[i].value = !services[i].value;
    this.setState({ services: services });
};

this.state.services.map((service, i) => (
    <FormControlLabel key={i}
        control={
            <Checkbox
                checked={service.value}
                onChange={() => this.handleServiceCheck(i)}
                value={service.service}
                className={classes.checkBox}
            />
        }
        label={service.service}
    />
))

Answer 1

Здесь есть несколько проблем.

Прежде всего, для checked реквизита Checkbox требуется логическое значение, но вы передаете целые числа.

Во-вторых, когдаизменяя предыдущее состояние, вы не должны изменять его на месте, вы должны передать функцию в setState, которая принимает предыдущее состояние и возвращает новое.

handleServiceCheck = (i) => {
  this.setState(prevState => ({services: 
    prevState.services.map((s, idx) => {
      return i === idx
        ? { ...s, value: !s.value }
        : s
    })
  }));
};

Вот пример CodeSandbox Я создал с полностью исправленной рабочей версией.