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

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

我在子组件中有一个下拉组件，我将复选框显示为从道具中提取的选项。我还选择了一些选项，当我单击 Apply 时，与对象匹配的属性应该得到更新，并相应地更新父状态

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

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

所以我需要将父母状态的“显示”属性更新为其反转值。基本上 show 用于显示/隐藏列

子组件

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

在第一次选择时，我希望状态应该更新为：

[
           {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);
  };