Установить состояние на основе свойства, присутствующего в массиве объектов: React + Typescript

Question

Я хочу установить состояние в реакции на основе свойства, которое присутствует в массиве объектов.

Код Песочница, которая выглядит аналогично: https://codesandbox.io/s/sleepy-lamarr-0sbdz

Эта функция отправки присутствует как submitSelection () внутри SelectComponent.tsx, где я зарегистрировал состояние консоли в вопросе. Это идентично

У меня есть объект состояния, который выглядит следующим образом:

this state = {
               columns : [
                          {Header: ƒ, accessor: "firstName",show: true},
                          {Header: ƒ, accessor: "status", show: true},
                          {Header: ƒ, accessor: "visits", show: true}
                         ]
             }

У меня есть список флажков, который отображает имена столбцов и на основе флага «показать» я скрываю / показываю их. Я создаю еще один массив объектов на основе выбора флажков, который выглядит примерно так:

this.state = { 
              selectedOptions: [
                                {name: "firstName", value: "firstName", show: true},
                                {name: "status", value: "status", show: false},
                                {name: "visits", value: "visits", show: true}
                                ]
            } 

Теперь мне нужно установить состояние «столбцов» на основе значения «selectedOptions». Я должен перебрать массив «selectedOptions», а затем, основываясь на «значении» (здесь я использую его в качестве ключа) каждого объекта, мне нужно обновить соответствующее свойство «show» объекта в столбцах.

В этом примере массив столбцов должен выглядеть после setstate:

columns : [
            {Header: ƒ, accessor: "firstName",show: true},
            {Header: ƒ, accessor: "status", show: false}, // because the value for this in selectedOptions is true
            {Header: ƒ, accessor: "visits", show: true}
          ]

Я использовал следующий подход, но он не работал

checkboxSubmit = () => {
   let { selectedOptions , columns } = this.state;
    const updatedObj = columns.map(object =>
      value.some(columns => columns.value === object.accessor)
        ? { ...object, show: columns.show  }
        : { ...object }
    );
    this.setState(columns: updatedObj);
}

Answer 1

Вот мое решение .

Вместо использования массива структуры данных CheckBox в SelectComponent я использовал отображенный массив логических значений (только для значений show) - это только мои предпочтения.

Я думаю, что ваши предыдущие проблемы были из-за того, что вы передавали тот же экземпляр Array для submitSelection. React не понимает, что приложение должно быть обновлено, потому что были изменены только объекты внутри массива, а не фактический массив.

Вероятно, вы могли бы заставить его работать, просто воссоздав Массив перед отправкой, но в этом случае вы изменили бы значения App.columns в SelectComponent. Как вы знаете, реквизит не должен быть изменен, так что это плохо.

Answer 2

Я бы сделал карту из selectedOptions let selectedOptionsMap = new Map(selectedOptions.map(option => [option.value, option]))

Затем обновите вашу функцию:

checkboxSubmit = () => {
   let { selectedOptions , columns } = this.state;
   let selectedOptionsMap = new Map(selectedOptions.map(option => [option.value, option]))
    const updatedColumns = columns.map(column => (
      {...column, show: selectedOptionsMap.get(column.accessor) ? selectedOptionsMap.get(column.accessor).show : column.show}
    ))
    this.setState(columns: updatedColumns)
}

Если вам нужна карта для других кальков, вы можете добавить ее в состояние.

ETA: в зависимости от вашей песочницы кода, вот код этой функции

  submitSelection = () => {
    let showMap = new Map(this.state.optionsArr.map(option => [option.value, option.show]))
    let updatedColumns = this.props.data.map(column => (
      {...column, show: showMap.get(column.accessor) != null ? showMap.get(column.accessor) : column.show }
    ))
    this.props.handleSetState(updatedColumns)
  };

Answer 3

Я думаю, что вы, возможно, перепутали свои переменные при отображении. Попробуйте это.

checkboxSubmit = () => {
  this.setState(({columns, selectedOptions}) => {
    const result = columns.map(col => {
      const op = selectedOptions.find(op => col.accessor === op.value);
      return { ...col, show: op.show }
    });
    return result;
  });
});