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

Я использую набор Material 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}
    />
))

reactjs checkbox state material-ui

26.02.2019 23:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 226

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

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

Вот Образец CodeSandbox, который я создал с полной исправленной рабочей версией.

Привет, это решило мою проблему. Большое спасибо.

— 01.03.2019 15:13

28.02.2019 11:35