ReactJs и Typescript, как изменить состояние переменной внутри объекта при использовании TSX - PullRequest
Новая
       14

ReactJs и Typescript, как изменить состояние переменной внутри объекта при использовании TSX

0 голосов
/ 08 ноября 2018

Я пытаюсь применить следующий список выпадающих списков реагирующих полос, переключая isOpen внутри каждого массива объектов в машинописи. Я получаю объект от redux, который имеет следующую структуру, Object.InnerObject.Array [isOpen, isOpen, ...] Я пытаюсь вызвать переключение в этом массиве, но машинопись не позволяет мне делать следующее. У меня есть следующий объект в состоянии: 

totalWorkload: {
      userId: 'd3d4',
      cost: 3,
      options: [
        {
          optionTitle: 'dedew',
          optionDescription: 'fewfw',
          options: [],
          isOpen: false,
          selectedOption: ''
        }
      ]
    }

Я пытаюсь переключить isOpen в массиве параметров в следующем компоненте: 

export const Options = props => (
  <div>
    {console.log(typeof props.totalWorkloadOptions.isOpen)}
    {console.log(typeof props.toggleDropDown}
    <Dropdown isOpen={props.totalWorkloadOptions.isOpen} toggle={() => props.toggleDropDown(props.totalWorkloadOptions.optionTitle)}>
      <DropdownToggle caret>{props.totalWorkloadOptions.optionTitle}</DropdownToggle>
      <DropdownMenu>
        {props.totalWorkloadOptions.options.map(op => (
          // tslint:disable-next-line:no-invalid-this
          // tslint:disable-next-line:jsx-no-lambda
          <DropdownItem key={op} data-key={op} onClick={() => props.appendChoiceList(props.totalWorkloadOptions.optionTitle, op)}>
            {op}
          </DropdownItem>
        ))}
      </DropdownMenu>
      <strong> {props.totalWorkloadOptions.optionDescription} </strong>
    </Dropdown>
    <br />
  </div>
);

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

toggleDropDown = optionTitle => {
      console.log("TITLE:" + optionTitle);
      const options = this.state.totalWorkload.options.map(item => {
        if (item.optionTitle === optionTitle) {
          this.setState({ ...item, isOpen: !item.isOpen })
        } else {
          return item;
        }
      });
      return { options };
    };

1 Ответ

0 голосов
/ 08 ноября 2018

Вам необходимо правильно установить состояние, создав новый объект. И TypeScript ожидает, что вы вернете значение типа option из конструкции map. Верните значение из оператора if, и все будет хорошо. 

toggleDropDown = optionTitle => {
      console.log("TITLE:" + optionTitle);
      const options = this.state.totalWorkload.options.map(item => {
        if (item.optionTitle === optionTitle) {
          return { ...item, isOpen: !item.isOpen }
        } else {
          return item;
        }
      });
      let workLoad = {...this.state.totalWorkload, options};

      this.setState({...this.state, totalWorklaod: workload});
      return { options };
    };
...