出现错误：试图合并一个对象，而不是得到 [object Object]

Posted 2023-02-22

【中文标题】出现错误：试图合并一个对象，而不是得到 [object Object]

【英文标题】：Getting error: Tried to merge an object, instead got [object Object]

【发布时间】：2014-10-12 06:27:17

【问题描述】：

我正在使用 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
]

---

所以我有两个问题：

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

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

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

【问题讨论】：

你在 IE 中吗？如果是这样，您只会看到[Object, object]，因为它不会将内容转储到控制台

【参考方案1】：

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

如果你使用this.setState( data: newState ); 之类的东西，setState 调用应该可以正常工作。这应该也解决了第二个问题。