React-table: состояние не меняется должным образом, и таблица не обновляется

Question

Пример Codesandbox: https://codesandbox.io/s/react-table-state-not-updating-hmquq?file= / src / App. js

Я использую пакет response-table (версия 7.1.0).

У меня есть таблица, в которой отображаются некоторые счета, например:

Пользователь должен иметь возможность выбрать некоторые или все из них элементы, используя флажок selected.

Поле selected не является частью данных. Однако, когда пользователь устанавливает флажок selected, поле должно переключаться и заполняться массивом, в котором хранятся номера документов.

Для хранения номеров документов у меня есть метод получения и установки с отслеживанием состояния:

const [selectedInvoiceIds, setSelectedInvoiceIds] = useState([]);

Чтобы заполнить поле, я пытаюсь просто добавить номер документа в массив неизменяемым образом из onChange флажка:

      {
        Header: "Selected",
        accessor: "selected",
        Cell: item => {
          const { documentNumber } = item.row.values;
          return (
            <input
              type="checkbox"
              checked={selectedInvoiceIds.includes(documentNumber)}
              onChange={() => {
                setSelectedInvoiceIds([...selectedInvoiceIds, documentNumber]);
              }}
            />
          );
        }
      }

При первом щелчке флажка время, selectedInvoiceIds становится заполненным:

selectedInvoiceIds: ["706942"]

Проблемы: :

• Таблица не обновляется, чтобы отразить изменение состояния, несмотря на это prop для флажка:

checked={selectedInvoiceIds.includes(documentNumber)}

• Значение selectedInvoiceIds получает перезаписывается , когда добавляется другой номер документа, вместо того, чтобы быть добавленным, как если бы состояние повторно инициализируется до [] где-то посередине.

Можно ли объяснить, почему возникают эти проблемы с состоянием и как их обойти?

Я знаю о useTableState значение, выставленное реакционной таблицей, но я не знаю, как применить его к этому варианту использования.

Пример Codesandbox: https://codesandbox.io/s/react-table-state-not-updating-hmquq?file= / src / App. js

Answer 1

В этом коде есть несколько проблем:

// 1) updates to state should should use callback function if it uses prv state

 return (
            <input
              type="checkbox"
              checked={selectedInvoiceIds.includes(documentNumber)}
              onChange={() => {
                setSelectedInvoiceIds(prvSelectedInovicesId => [...prvSelectedInovicesId, documentNumber]);
              }}
            />
          );

// 2) also columns is using useMemo, however not providing dependencies, so columns are not being updated when the selectedInvociesIds state gets updated

// 3) you are not yet handling the toggle, this mean you are just always just adding to the array and not removing from it

вот песочница кода рабочей версии https://codesandbox.io/s/react-table-state-not-updating-wkri3?file= / src / App. js

Answer 2

Из-за useMemo добавьте свой массив к последнему параметру

const columns = React.useMemo(
// ....
,
[selectedInvoiceIds]
  );

И поскольку нам нужно переключать флажки, более разумно сохранить выбранные идентификаторы в объекте, а не в массиве, и обновить его как это

setSelectedInvoices({
  ...selectedInovicesIds, 
  documentNumber: !selectedInovicesIds[documentNumber]}
) 

, чтобы поменять отметку