[英]Reactjs - Sorting an array of objects in state
我想弄清楚在拖放界面中对菜单项重新排序时React组件状态是怎么回事。 在我的代码中,我有一个完全可拖动排序的菜单组件,该组件从父组件的状态传递了带有一系列项目的对象。
在处理拖放排序时,我在其他地方进行了所有数组操作,然后使用setState()或不可变更新覆盖处于状态的数组,因此菜单将重新呈现。 问题是,当我尝试执行此操作时,列表在render()上重新排序回到其原始状态(有时是随机排序)。 我不确定发生了什么,这可能是我做错了,但同时我已经尝试了一切。 因此,看起来像React的某些东西我并没有抓住。
index.js
var _ = require('lodash');
var Update = require('react-addons-update');
//.....more dnd logic.....//
var myArray = _.cloneDeep($this.state.appMenuData.children);
//get dragged element index
var draggedElemIndex = $this._getNodeIdIndex(el);
var draggedElemObj = myArray[draggedElemIndex];
//element was dragged to the bottom of the list
if(sibling == null){
var newPos = myArray[myArray.length-1].position;
myArray[draggedElemIndex].position = newPos;
myArray[draggedElemIndex].changed = true;
for(var i = draggedElemIndex+1; i <= myArray.length-1; i++){
myArray[i].position-=1;
}
myArray.sort(function(a, b){
return a.position-b.position;
});
var newData = Update($this.state, {
appMenuData: {children: {$set: myArray}},
});
$this.setState(newData);
}
//.....more dnd logic.....//
render(){
<Menu data={this.state.appMenuData} />
}
更新看起来这不是react的问题,这是我使用的drag n drop库的问题。 我最近与一个不同的库集成在一起,所有不可靠的状态更新都消失了。
这可能与React的虚拟DOM协调算法有关,该算法要求您为数组循环中的项目提供唯一的ID,然后将其嵌入key={item.id}
。 这是更详细的讨论:
http://survivejs.com/webpack_react/implementing_notes/#comment-2438453906
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.