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

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

我在子组件中有一个下拉组件，其中我将复选框显示为从 Prop 中提取的选项。另外，我选择了一些选项，当我单击“应用”时，与对象匹配的属性应该得到更新，相应的父状态也应该更新

例如，单击“Apply”，我形成此数组

值 = ['名字','状态'];

所以我需要 parent 状态“显示”属性应更新为其反转值。基本上 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);
  };