0

I'm trying to use this.setState within handleFormSubmit however this.setState isn't updating and I'm not sure why. If I run console.log(updatePosition) before this.setState I can that all the data is there. What am I missing? I use similar code for handleChange and I don't have problems. 

constructor(props) {
  super(props);

  let uniqueId = moment().valueOf();

  this.state = {
    careerHistoryPositions: [{company: '', uniqueId: uniqueId, errors: {} }],
  };

  this.handleFormSubmit = this.handleFormSubmit.bind(this);
}




handleFormSubmit(event) {
  event.preventDefault();
  const { careerHistoryPositions } = this.state;

  const updatePosition = this.state.careerHistoryPositions.map((careerHistoryPosition) => {
    const errors = careerHistoryValidation(careerHistoryPosition);
    return { ...careerHistoryPosition, errors: errors  };
  });

  console.log(updatePosition)
  this.setState({ careerHistoryPositions: updatePosition });
}
bp123
  • 3,217
  • 8
  • 35
  • 74
  • You code seems fine, where do you check whether the state has updated or not – Shubham Khatri Jun 26 '17 at 05:23
  • after this.setState – bp123 Jun 26 '17 at 05:23
  • 1
    Possible duplicate of [this.setState doesn't update value](https://stackoverflow.com/questions/41278385/this-setstate-doesnt-update-value) – Shubham Khatri Jun 26 '17 at 05:24
  • 1
    In that case its a duplicate of the question I have marked . Check the answer on that question – Shubham Khatri Jun 26 '17 at 05:24
  • Thanks @ShubhamKhatri – bp123 Jun 26 '17 at 05:32
  • Sorry, I didn't even think of that. Will do. – bp123 Jun 26 '17 at 05:34
  • @bp123 this actually depends if your extending on PureComponent or React.Component. If your using React.Component your code should re-render every time you call this.setState() method. But if your using PureComponent and in your code if your object does not change. It won't re-render. https://60devs.com/pure-component-in-react.html – mr.b Jun 26 '17 at 05:52

2 Answers2

2

Keep in mind that the state isn't updated immediately. If you want to check if it's updated use callback function. Something as follows:

this.setState({ careerHistoryPositions: updatePosition }, () => console.log(this.state.careerHistoryPositions);

From the docs :

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

Hope this helps.

Boky
  • 11,554
  • 28
  • 93
  • 163
0

You should show how you are calling handleFormSubmit chances are that it's bound to a Dom event. So this is not the class/component, instead if you console.log(this); you'll see that it's the Dom element, the form element.

To make your code work as intended, in your component constructor() method, add this to rebind the handler function to the react component's class method, and you'll have access to this.state and this.setState()

this.handleFormSubmit = this.handleFormSubmit.bind(this);
theRemix
  • 2,154
  • 16
  • 16
  • As the OP says, he is able to see the correct O/P for `console.log(updatePosition)` , it means he has done the appropriate binding. So thats not a problem. Check the Duplicate question – Shubham Khatri Jun 26 '17 at 05:26
  • Yup he just updated the code snippet a minute ago showing the bind. Thanks. – theRemix Jun 26 '17 at 05:27