javascript - 收到错误 : Tried to merge an object, 而得到 [object Object]

Question

我正在使用 ReactJS 构建一个简单的 TODO 应用程序，并且需要使用 jQuery Sortable 对待办事项进行排序。我完成了大部分工作，但最终遇到了两个无法自己解决的问题:(

所以这是代码:

componentDidMount: function() {
  this.loadDataFromServer();

  var jquery_sortable_config = {handle: '#handle'};
  jquery_sortable_config.stop = this.handleSort;
  this.$jq = jQuery( this.refs.sortable.getDOMNode() );
  this.$jq.sortable(jquery_sortable_config);
},

toInt: function(id) {
  // I've got <li id={"todo_" + todo.id}></li> so I need to crop todo_

  // was - todo_565
  // return - 565
  return parseInt(id.substring(5));
},

handleSort: function (event) {
  var order = this.$jq.sortable('serialize');

  // sending new order to server, here is everything OK
  $.ajax ({
    type: 'POST',
    url: 'update_order/',
    data: order
  });

  var reordering = this.$jq.sortable('toArray').map(this.toInt);
  this.$jq.sortable('cancel'); // cancel direct DOM change, beacause React can't see it
  this.handleDOMUpdate(reordering);
},

handleDOMUpdate: function(reordering) {
  console.log(reordering);
  // CONSOLE:
  // [566, 565]

  var newItems = [];
  var newState = {};

  this.state.data.map(function(item, i, items) {
    // for testing there are just 2 elements in state and I just shuffle them
    newItems[0] = items[1];
    newItems[1] = items[0];
  });

  newState = newItems;

  console.log(newState);
  // CONSOLE:
  // [Object, Object]
  //   0: Object
  //     id: 566
  //     status: "done"
  //     text: "Second task"
  //     __proto__: Object
  //   1: Object
  //     id: 565
  //     status: ""
  //     text: "First task"
  //     __proto__: Object
  //   length: 2
  //   __proto__: Array[0]

  // so elements changed positions!


  // trying to set new state
  this.setState(newState);
  // and getting error:
  // Uncaught Error: Invariant Violation: Tried to merge an object, instead got [object Object],[object Object].     10173493_255140104677950_2108691993_n.js:17078

  // and futher:

  // invariant                                10173493_255140104677950_2108691993_n.js:17078
  // mergeHelpers.checkMergeObjectArg         10173493_255140104677950_2108691993_n.js:17652
  // mergeInto                                10173493_255140104677950_2108691993_n.js:17749
  // merge                                    10173493_255140104677950_2108691993_n.js:17558
  // ReactCompositeComponentMixin.setState    10173493_255140104677950_2108691993_n.js:6200
  // React.createClass.handleDOMUpdate        custom_react.js:81
  // boundMethod                              10173493_255140104677950_2108691993_n.js:6644
  // ... etc.
},

这是我的模型:

[
 {"status": "", "text": "First task", "id": 565},
 {"status": "done", "text": "Second task", "id": 566}
]

---

所以我有两个问题:

1. 如何设置新的 React 状态并更改元素位置？我做错了什么？

2. 您能帮我解决 this.state.data.map 中的逻辑吗？如何迭代所有项目并根据数组reordering[i]设置它们的新位置？

    this.state.data.map(function(item, i, items) {
    // logic 
    });
   

Answer 1

当您运行 setState 调用时，您将使用 newItems 数组覆盖 newState 对象 newState = newItems;，因此您向函数传递的是数组而不是对象。

如果您使用类似 this.setState({ data: newState }); 的内容，setState 调用应该可以正常工作。这应该也可以解决第二个问题。