以不可变的方式更新子组件中父组件的状态

Question

我有一组具有以下属性的对象。

columns = [
           {Header: ƒ, Cell: ƒ, sortable: false, show: true},
           {Header: ƒ, accessor: "firstName", sortable: false, show: true},
           {Header: ƒ, accessor: "status", sortable: false, show: true},
           {Header: ƒ, accessor: "visits", sortable: false, show: true}
          ]

我将这个对象数组发送给子组件，还有一个方法将用于从子组件设置父组件的状态

父组件

<Child columns={this.props.child} handleSetState={this.handleSetState}/>

handleSetState = columns => {
    this.setState({ columns });
};

我在子组件中有一个下拉组件，我在其中显示复选框作为从道具中提取的选项。我还 select 一些选项，当我点击 Apply 时，匹配对象的属性应该更新，相应的父状态

例如，点击应用，我形成了这个数组

值 = ['firstName','status'];

所以我需要父状态 'show' 属性应该更新到它的反转值。基本上显示用于show/hide列

子组件

  value = ['firstName','status'];
  submitSelection = () => {
    let updatedObj = this.props.columns.map((obj, i) => {
      if (obj.accessor === value[i]) {
        obj.show = !obj.show;
      }
      return obj;
    });
    this.props.handleSetState(updatedObj);
  };

在第一个 selection 上，我希望状态应该更新为：

[
           {Header: ƒ, Cell: ƒ, sortable: false, show: true},
           {Header: ƒ, accessor: "firstName", sortable: false, show: false},
           {Header: ƒ, accessor: "status", sortable: false, show:false},
           {Header: ƒ, accessor: "visits", sortable: false, show: true}
]

我无法在 'submitSelection()' 中正确映射索引。是否有比此处更清晰的逻辑？

不胜感激

Answer 1

您可以通过以下方式编写您的 submitSelection 函数：

  values = ['firstName','status'];

  submitSelection = () => {
    const updatedObj = this.props.columns.map(o => 
      values.some(val => val === o.accessor) 
      ? { ...o, show: !o.show } 
      : {...o}
    );
    this.props.handleSetState(updatedObj);
  };

以不可变的方式更新子组件中父组件的状态

Updating the state of a parent in child component in a immutable way

javascript

setstate

typescript

ecmascript-6

reactjs

父组件

子组件