Таблица данных функционального компонента не перерисовывается при добавлении / удалении столбцов, которые устанавливаются / сохраняются в состоянии в массиве объектов

Question

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

В верхней части функционального компонента я устанавливаю состояние следующим образом:

  const [formColumns, setDisplayFields] = useState(formFields);

formFields извлекается из файла и форматируется, как показано ниже. Это массив JSON объектов столбцов, который выглядит следующим образом:

    [id: {
      name: 'id',
      label: 'Patient Id',
      displayColumn: false,
      displayOrder: 1,
    },
    firstName: {
      name: 'firstName',
      label: 'First Name*',
      requiredErrorMsg: 'First name is required',
      displayColumn: true,
      displayOrder: 2,
    },
    middleName: {
      name: 'middleName',
      label: 'Middle Name',
      displayColumn: false,
      displayOrder: 0,
    },
    lastName: {
      name: 'lastName',
      label: 'Last Name*',
      requiredErrorMsg: 'Last name is required',
      displayColumn: true,
      displayOrder: 0,
    },
    suffix: {
      name: 'suffix',
      label: 'Suffix',
      displayColumn: false,
      displayOrder: 0,
    },
    dob: {
      name: 'dob',
      label: 'Date of Birth*',
      requiredErrorMsg: 'Birth date is required',
      invalidErrorMsg: 'This is not a valid date',
      displayColumn: true,
      displayOrder: 3,
    },
    organization: {
      name: 'organization',
      label: 'Organization',
      displayColumn: false,
      displayOrder: 4,
    },
  ]

На самом деле столбцов больше, но этого должно быть достаточно для описания того, что я делаю. Элемент displayColumn изменяется в событии onChange в том же компоненте, который отображает таблицу (передает его как опору в меню флажков). Вот изменение:

  /**
   * handleCheckboxSelect
   * @param {string} colname
   */
  var handleCheckboxSelect = (colname) =>
  {
    //return the index of the column checked/unchecked
    var icol = getColumnIndex(formColumns, colname);
    console.log('FOUND COLINDEX = ' + icol + '.');
    if (icol > -1) {
      //toggle the display parameter
      formColumns[icol].displayColumn = (formColumns[icol].displayColumn === false);
      //store the updated column in the column list
      setDisplayFields(formColumns);
    }
    else {
      console.log('checkbox colname = ' + colname);
    }
  }

Как вы можете видеть, я использую состояние по мере необходимости, и каждый раз, когда состояние изменяется, он должен вызывать повторную визуализацию. Однако это не так. Это потому, что я использую массив объектов? Если я верну один столбец и перейду к нему в состояние, решит ли это проблему? Я в тупике. Любая помощь будет принята с благодарностью!

Answer 1

Вы устанавливаете ту же ссылку formColumns на setDisplayFields, которая не запускает повторную визуализацию компонента. Попробуйте скопировать formColumns в новый массив и внести изменения в этот массив.

Попробуйте это -

var handleCheckboxSelect = (colname) =>
  {
    //create new array from existing one
    let newColumns = [...formColumns];

    var icol = getColumnIndex(newColumns, colname);
    console.log('FOUND COLINDEX = ' + icol + '.');
    if (icol > -1) {
      //toggle the display parameter
      newColumns[icol].displayColumn = (newColumns[icol].displayColumn === false);
      //store the updated column in the column list
      setDisplayFields(newColumns);
    }
    else {
      console.log('checkbox colname = ' + colname);
    }
  }