Question

首先，我要说的是我很新，所以这可能有点愚蠢。

在ReactTable's的帮助下，我很难使mattlockyer's gist列可排序

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

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

这是有问题的代码

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

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

我将codepen与我当前的工作以及有关所讨论代码的注释放在一起。

任何帮助将不胜感激。

Answer 1

好，所以我想我知道发生了什么事。

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

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

// 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 ...

有更多反应经验的人可能还会改善。

列上的ReactTable setState不会更改布局

1 个答案: