Флажок React table использует состояние из удаленной строки

Question

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

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

Вот кодпесочница, чтобы воспроизвести проблему. https://codesandbox.io/s/unruffled-williamson-d172s

Шаги воспроизведения:

1. Установите флажок в первом ряду.
2. Введите некоторый текст в флажок в первом ряду.
3. Нажмите «Отправить» в первом ряду.

Ожидаемые результаты: первая строка должна быть удалена.

Фактические результаты: первая строка удалена, а оставшийся флажок установленфлажок.

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

Answer 1

Я решил эту проблему, изменив используемую таблицу реакций. Это можно сделать, либо добавив хук к таблице реакции, либо реализовав метод getRowID.

Использование getRowID и комбинации значений ключа для хеша

const getRowID = (row, relativeIndex) => {
  const hash = Object.keys(row).map(k => {
    // Only get the first letter of the prop and value
    // to keep the hash short, so it is easier to see
    // the full hash in dev tools
    return `${k[0]}${String(row[k])[0] || ''}`;
  }).join('');
  const id = `${relativeIndex}${hash}`;
  return id;
};
const table = useTable({ columns, data, getRowID });

документация useTable с функцией getRowID

Использование хешей и Math.random для хеша

// Using Math.random() will usually guarantee a unique hash
// but it is better to get a hash function that would map
// the same row to the same hash
const keyHooks = hooks => {
  hooks.getRowProps.push(props => {
    return {
      key: `${props.index}_${Math.random()}`
    }
  });
};

// ...

const table = useTable({ columns, data }, keyHooks);