Неизменяемое обновление состояния родителя в дочернем компоненте

У меня есть массив объектов со следующими свойствами.

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

У меня есть выпадающий компонент в дочернем компоненте, где я показываю флажки как параметры, извлеченные из реквизита. Также я выбираю некоторые параметры, и когда я нажимаю «Применить», свойство, соответствующее объекту, должно обновляться и, соответственно, состояние родителей.

Например, при нажатии кнопки «Применить» я формирую этот массив

значение = ['имя','статус'];

Поэтому мне нужно, чтобы свойство 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()'. Есть ли более чистая логика, чем можно реализовать здесь?

Помощь будет оценена по достоинству


reactjs typescript javascript setstate ecmascript-6
person VJR08    schedule 25.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать свою функцию 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);
  };
person zilijonas    schedule 25.06.2019
comment
LiJonas Большое спасибо - person VJR08; 25.06.2019
comment
Можете ли вы проверить это, пожалуйста, stackoverflow.com/questions/56761326/ - person VJR08; 26.06.2019