Reactjs-对处于状态的对象数组进行排序

当在drag-n-drop界面中重新排序菜单项时，我正试图弄清楚React组件状态发生了什么。在我的代码中，我有一个完全可以拖动排序的菜单组件，它可以从父组件的状态中传递一个带有项目数组的对象。

在处理drag-n-drop排序时，我在其他地方进行所有数组操作，然后用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的问题，而是我使用的拖放库的问题。我最近集成了一个不同的库，所有不稳定的状态更新都消失了。