ReactTable setState для столбцов не меняет макет

Question

сначала я должен упомянуть, что я очень новичок, чтобы реагировать, так что это может быть что-то глупое ..

Я изо всех сил пытался заставить столбец ReactTable быть сортируемым с помощью сущности Мэттлокера

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

Функция рендеринга «столбцы» содержит обновленный объект с правильным порядком столбцов, однако рендер не изменяет порядок столбцов и не сортирует содержимое столбцов.

Это код, о котором идет речь,

this.setState({
  columns: newColLayout,
}, () => {
  this.mountEvents();
});

Это вызовет рендеринг, но столбцы останутся прежними.

Я собрал codepen с моей текущей работой и комментариями по поводу рассматриваемого кода.

Любая помощь будет принята с благодарностью.

Answer 1

ОК, так что я думаю, что понял, что происходит.

Проблема в том, что сплайс изменяет состояние, не вызывая события изменения, тогда, когда событие запускается из setStat, реакция не видит изменения, внесенные в макет столбца, так как оно соответствует текущему значению.

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

// Clone the current column state.
const columnClone = this.state.columns.slice(0);
// Remove item from array and stick it in a new position.
columnClone.splice(i, 0, columnClone.splice(this.draggedCol, 1)[0]);

Вот обновленный код ...

Тем не менее, он может быть улучшен тем, у кого больше опыта в реакции.