Question

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

所以这是代码：

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}
]

所以我有两个问题：

如何设置更改元素位置的新React状态？我做错了什么？
你能否帮我解决this.state.data.map中的逻辑问题。如何根据数组reordering[i]迭代所有项目并设置新位置？
```
 this.state.data.map(function(item, i, items) {
 // logic 
 });
```

Answer 1

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

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

获取错误：尝试合并一个对象，而不是[object Object]

1 个答案: