获取错误:试图合并一个对象,而不是得到[object object]

Getting error: Tried to merge an object, instead got [object Object]

本文关键字:object 取错误 一个对象 合并 获取      更新时间:2023-09-26

我正在用ReactJS构建一个简单的TODO应用程序,需要用jQuery Sortable对TODO进行排序。我做了大部分的工作,但最后有两个问题不能解决自己:(

代码如下:

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 
     });
    

当你运行setState调用时,你正在用newItems数组newState = newItems;覆盖你的newState对象,因此你正在传递函数一个数组而不是一个对象。

如果您使用this.setState({ data: newState });之类的东西,setState调用应该正确工作。这应该也能解决第二个问题。