Массив из ответа API без атрибутов true и false, полученных для динамического создания флажков в React

Question

Я создал динамические флажки из результатов API в веб-приложении React-Redux, но проблема в том, что результаты флажков не обновляются в onClick, устанавливая новое состояние.Должно быть в состоянии обновить состояние с помощью функции setState.

Я попытался использовать решение по этой ссылке ниже, но оно не сработало для меня, потому что полезная нагрузка, которую я получаю от API, не содержит проверенных атрибутов илиатрибуты true / false.

Выполнение вызова API для динамического создания флажков в реагировании

Полученная полезная нагрузка выглядит следующим образом:

flavors: Array(3)
0: {id: "1001", name: "Spicy"}
1: {id: "1002", name: "Hot"}
2: {id: "1003", name: "Mediterranean"}

Который должен заполниться:

getInitialState = () => {

  const initialState = {
      customer: {
                  id: '',
                  firstName: '',
                  lastName: '',
                  email: ''        
                },
     flavours: []    //Array to be populated, what is desired: {Spicy: false, 
                     // Hot: false, Mediterranean: false} 
                     // is populated currently as : Spicy, Hot, 
                     //   Mediterranean
      },
  return initialState;
 }

получить полезную нагрузку от API и метод обработчика флажка:

 getAllFlavours() {
   const { dispatch } = this.props;
   dispatch(userActions.getFlavours()).then((response) => {
   var flavourList = [];
   for (var i = 0; i < response.flavours.length; i++) {
      flavourList.push(response.flavours[i].name);
    }
    this.setState({
      flavours: flavourList,
     });
   });
 }

 handleCheckboxChange(event) {
    const target = event.target;
    const isChecked = target.checked;
    const name = target.name;
    this.setState({ flavours: { ...this.state.flavours, [name]: 
    isChecked } });
  }

метод создания флажков:

render() {

let flavourCheckboxes = this.state.flavours.map((item, i) => {
  return (<FormGroup key={i}>
     <Col>
      <Label key={i}>{item}</Label>
      </Col>
      <Col>
      <Input key={i} name={item} type="checkbox" checked={item} onClick= 
       {this.handleCheckboxChange} />
      </Col>
    </FormGroup>)
 });

 return (
 // other html tags
   <CardBody>
      <Row>
         {flavourCheckboxes}  // checkboxes created
      </Row>
   </CardBody>
   // other html tags

Я ожидаю, что флажок будетвозможность проверять и снимать флажки, а также обновлять состояние, когда оно вызывается при нажатии, но в настоящее время я проверяю все значения, и вы не можете снять их

Примечание: также пытался использовать defaultCheck вместо флажка, который послеonClick выдаст карту с неопределенной ошибкой

Answer 1

В getAllFlavours, я не знаю, должны ли вы получать проверенные / непроверенные значения от API, но при установке состояния в getAllFlavours вы можете установить его примерно так:

let flavourLists = { [name] : { isChecked : false } };

ипереписать проверенное значение в handleCheckboxChange следующим образом:

this.setState({ flavours: { ...this.state.flavours ,[name] : { isChecked : true } } })

получить доступ к значениям состояния соответственно при рендеринге сейчас.

Answer 2

Значения флажков не нуждаются в true или false, они либо отмечены, либо ничего.Поэтому все, что мне нужно было сделать, это удалить checked={item}, чтобы флажки были отмечены независимо от того, изменил я состояние или нет.