在React Native中设置状态不起作用

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

Answer 1

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> 

Answer 2

您需要在setState操作中控制台日志，因为setState是一个同步操作，因此请尝试以下操作：

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