我试图弄清楚在拖放界面中重新排序菜单项时我的React组件状态发生了什么 . 在我的代码中，我有一个完全可拖动排序的菜单组件，它传递一个带有父组件状态的项目数组的对象 .
在处理drag-n-drop排序时，我在其他地方执行所有数组操作，然后使用setState（）或使用immutable update覆盖状态中的数组，以便菜单重新呈现 . 问题是，当我尝试这样做时，列表在render（）上重新排序回到它的原始状态（或者有时是随机排序） . 我不确定发生了什么，这可能是我做错了，但与此同时我尝试了一切 . 所以它看起来像React，我没有 grab .
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} />
}
UPDATE 看起来这不是反应的问题，这是我正在使用的拖放库的一个问题 . 我最近与一个不同的库集成，所有不稳定的状态更新都消失了 .
1 回答
这可能与React的Virtual DOM协调算法有关，该算法要求您为数组循环中的项目提供唯一ID，然后将其嵌入
key={item.id}. 这是一个更详细的讨论：http://survivejs.com/webpack_react/implementing_notes/#comment-2438453906