列上的 ReactTable setState 不会更改布局
ReactTable setState on columns is not changing layout
首先我要提一下,我对反应还很陌生,所以这可能有点傻..
我努力得到 ReactTable's column to be sortable with the help of mattlockyer's gist
我不明白的是我在列上调用了 setState,然后正确触发了渲染调用,但它没有更新布局。
呈现函数 "columns" 包含一个具有正确列顺序的更新对象,但是呈现不会更改列顺序,也不会对列内容进行排序。
这是有问题的代码,
this.setState({
columns: newColLayout,
}, () => {
this.mountEvents();
});
它将触发渲染,但列保持不变。
我将我目前的工作和有关代码的评论放在一起 codepen。
如有任何帮助,我们将不胜感激。
好的,我想我明白发生了什么事了。
问题是 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]);
有更多 React 经验的人可能会改进。
首先我要提一下,我对反应还很陌生,所以这可能有点傻..
我努力得到 ReactTable's column to be sortable with the help of mattlockyer's gist
我不明白的是我在列上调用了 setState,然后正确触发了渲染调用,但它没有更新布局。
呈现函数 "columns" 包含一个具有正确列顺序的更新对象,但是呈现不会更改列顺序,也不会对列内容进行排序。
这是有问题的代码,
this.setState({
columns: newColLayout,
}, () => {
this.mountEvents();
});
它将触发渲染,但列保持不变。
我将我目前的工作和有关代码的评论放在一起 codepen。
如有任何帮助,我们将不胜感激。
好的,我想我明白发生了什么事了。
问题是 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]);
有更多 React 经验的人可能会改进。