CODEWITHSUNDEEP
reactjscallbackrendersetstate
Lukáš Unzeitig
Lukáš Unzeitig

Reputation: 439

React SetState doesn't call render

I send my function to child component for callBack. In the parent, I have a function with setState method:

onInputUpdated(id){
  var array = {};
  let char = id.slice(-1);
  console.log(this.state.states)
  switch(char){
    case 'a':
      array[id] = this.getY(ReactDOM.findDOMNode(this.refs[id].refs.inp).value);
      break;
    case 'b':
      array[id] = this.getX(ReactDOM.findDOMNode(this.refs[id].refs.inp).value);
      break;
  }

  let oldStates = this.state.states;
  oldStates[id] = array[id];

  this.setState({
    states: oldStates
  });
  console.log(oldStates);
}

Where states is an object.

After this, states is set. I can see it in the next callBack, where I have print to console. However, the render method isn't invoked. During componentMount, everything is rendered correctly.

What to do? Thanks.

Upvotes: 2

Views: 891

Answers (2)

Clay Risser
Clay Risser

Reputation: 3570

I think you are setting it and then settings it back again. Try and create a brand new instance of the object. Here is how to do it with underscore.

First make sure you run the following . . .

npm install --save underscore

And then import underscore . . .

import _ from 'underscore';

and then clone the object.

let oldStates = _.clone(this.state.states);

Upvotes: -1

ivarni
ivarni

Reputation: 17878

When you do let oldStates = this.state.states; you're just making oldStates variable a reference to this.state.states, so you're effectively changing the state before you call setState.

Try to make a copy of it instead, for example let oldStates = Object.assign({}, this.state.states, or use lodash or something similar if you need a deep clone.

Upvotes: 4

Related Questions