列上的ReactTable setState不会更改布局

Question

首先我应该提一下，我很反应，所以这可能是愚蠢的......

在ReactTable's的帮助下，我努力让mattlockyer's gist专栏可以排序

我不明白的是我在列上调用setState然后正确触发了渲染调用，但它没有更新布局。

渲染函数“columns”包含具有正确列顺序的更新对象，但渲染不会更改列顺序，也不会对列内容进行排序。

这是有问题的代码，

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

它将触发渲染，但列保持不变。

我把codepen和我目前的工作以及有关代码的评论放在一起。

任何帮助将不胜感激。

Answer 1

好的，所以我想我发现了最新情况。

问题是splice在不触发更改事件的情况下修改状态，然后当从setStat触发事件时，react看不到对列布局所做的更改，因为它与当前值匹配。

我解决这个问题的方法是使用切片克隆列数组。

// 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]);

Here is the updated code ...

仍有可能通过有更多反应经验的人来改进。