setting state in React Native doesn't work

Question

I am trying to set the state of my Screen to some values that I need to send to a database afterwards. These values come from a form and are the correct values. Now I have the issue that the setState function seems to get ignored...

I have tried this code:

handleSubmit = () => {
    const value = this._form.getValue();

    console.log(value);

    this.setState({
        description: value.description,
        places_free: value.places_free
    })
    console.log(this.state);
}

the console logs for this look as followed lines of code show:

Struct {
  "description": "Test description",
  "phone": "09 353 90 50",
  "places_free": 2,
  "website": "http://www.oakgent.be/",
}

Object {
  "description": "",
  "latitude": 51.055979,
  "longitude": 3.711001,
  "name": "Oak Restaurant",
  "phone": "09 353 90 50",
  "places_free": null,
  "website": "http://www.oakgent.be/",
}

I also tried by setting the variables myself in the setState function to see if it has to do with the struct but that gives the same result:

handleSubmit = () => {
    const value = this._form.getValue();

    console.log(value);

    this.setState({
        description: "test",
        places_free: 1
    })
    console.log(this.state);
}

console logs:

Struct {
  "description": "Test description",
  "phone": "09 353 90 50",
  "places_free": 2,
  "website": "http://www.oakgent.be/",
}

Object {
  "description": "",
  "latitude": 51.055979,
  "longitude": 3.711001,
  "name": "Oak Restaurant",
  "phone": "09 353 90 50",
  "places_free": null,
  "website": "http://www.oakgent.be/",
}

I am kinda stuck at this point and I was hoping someone could lend me a hand

Junius L · Accepted Answer · 2019-06-03 19:27:46Z

setState is async doing console.log(this.state); will return the old data.

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.

handleSubmit = () => {
  const value = this._form.getValue();

  console.log(value);

  this.setState({
    description: "test",
    places_free: 1
  }, () => console.log(this.state))

}

DEMO

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      modalShow: false
    };
  }

  render() {
    return (
      <div>
        <p onClick={() => {
          console.log(this.state);
          this.setState({ modalShow: true }, () => {
            console.log(this.state);
          });
          
        }}>
          Calling state with a callback
        </p>
        <p onClick={()=> {
          console.log(this.state);
          this.setState({ modalShow: true });
          console.log(this.state);
        }}>
        Priniting state after setting value
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>

That was exactly what was wrong. Never knew that setting state was async... I wasted hours on this but thanks for explaining it so quick and simple!

Idan · Accepted Answer · 2019-06-03 19:14:24Z

1

You need to console log inside setState action because setState is a synchronic action so try this one:

this.setState({ description: "test", places_free: 1 }, () => console.log(this.state))

answered Jun 3, 2019 at 19:14

Idan

4,1531 gold badge33 silver badges34 bronze badges

Collectives™ on Stack Overflow

setting state in React Native doesn't work

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related