Reactjs - 对状态中的对象数组进行排序答案

【问题标题】：Reactjs - Sorting an array of objects in stateReactjs - 对状态中的对象数组进行排序
【发布时间】：2016-03-04 18:51:39
【问题描述】：

我试图弄清楚在拖放界面中重新排序菜单项时我的 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} />
}

更新看起来这不是反应的问题，而是我使用的拖放库的问题。我最近集成了一个不同的库，所有不稳定的状态更新都消失了。

【问题讨论】：

看起来您正在正确更新状态，但您需要确保子项正确呈现。可以为孩子们发布渲染代码吗？

标签： javascript arrays reactjs state

【解决方案1】：

这可能与 React 的 Virtual DOM 协调算法有关，该算法要求您为数组循环中的项目提供唯一 ID，然后将其嵌入 key={item.id}。这是一个更详细的讨论：

http://survivejs.com/webpack_react/implementing_notes/#comment-2438453906

【讨论】：

uuid.v4() 拯救了我的一天。谢谢老哥！