CODEWITHSUNDEEP
javascriptjqueryjsonreactjs
Kimik
Kimik

Reputation: 23

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

I'm building a simple TODO app with ReactJS and need to sort todos with jQuery Sortable. I did most of the job, but finally got 2 problems which can't solve myself :(

So here is the code:

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.
},

Here is my model:

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

So I have 2 problems:

  1. How can I set new React state with changed elements position? What am I doing wrong?

  2. Could you please help me with logic in this.state.data.map. How can I iterate all items and set their new positions according to array reordering[i]?

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

Upvotes: 2

Views: 1036

Answers (1)

jonowzz
jonowzz

Reputation: 425

When you are running the setState call you are overriding your newState object with the newItems array newState = newItems; and thus you are passing the function an array instead of an object.

If you use something like this.setState({ data: newState });, the setState call should work correctly. This should solve the second problem as well.

Upvotes: 2

Related Questions