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

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

例如，单击“应用”时，我形成这个数组

value = ['firstName'，'status'];

因此，我需要父母将状态“ show”属性更新为其反向值。基本上，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);
  };

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

父组件

子组件

1 个答案: