列上的 ReactTable setState 不会更改布局

Question

首先我要提一下，我对反应还很陌生，所以这可能有点傻..

我努力得到 ReactTable's column to be sortable with the help of mattlockyer's gist

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

呈现函数 "columns" 包含一个具有正确列顺序的更新对象，但是呈现不会更改列顺序，也不会对列内容进行排序。

这是有问题的代码，

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

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

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

如有任何帮助，我们将不胜感激。

Answer 1

好的，我想我明白发生了什么事了。

问题是 splice 在不触发 change 事件的情况下修改状态，然后当从 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...

有更多 React 经验的人可能会改进。

列上的 ReactTable setState 不会更改布局

ReactTable setState on columns is not changing layout

reactjs

react-table