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

Posted 2023-03-23

【中文标题】ReactJs 和 Typescript，使用 TSX 时如何更改对象内变量的状态

【英文标题】：ReactJs and Typescript, how to change the state of a variable inside an Object when using TSX

【发布时间】：2019-04-11 23:32:04

【问题描述】：

我试图通过在 typescript 中切换每个 Object 数组中的 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>
);

问题是当我到达这里时，我实际上无法设置传递的下拉列表的状态是打开：

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 ;
    ;

【问题讨论】：

小提琴可以分享吗？

稍后我会为你做的，我只是现在不在我的电脑前

好的 np @Reacter23

【参考方案1】：

您需要通过构造新对象来正确设置状态。 TypeScript 期望您从 map 构造返回一个 option 类型的值。从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 ;
    ;

【讨论】：

我已经尝试过了，它解决了我的错误，但是当我尝试切换它们时，我的下拉菜单仍然保持关闭状态。