reactjs - ReactJs 和 Typescript，如何在使用 TSX 时更改对象内变量的状态

Question

我试图通过在打字稿中的每个对象数组中切换 isOpen 来应用以下 reactstrap 下拉列表。我从 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 };
    };

Answer 1

您需要通过构造新对象来正确设置状态。optionTypeScript 期望你从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 };
    };