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

Question

我试图将“屏幕”的状态设置为一些以后需要发送到数据库的值。 这些值来自表格，是正确的值。 现在我有一个问题，就是setState函数似乎被忽略了...

我已经试过这段代码：

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

    console.log(value);

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

控制台日志显示如下：

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/",
}

我还尝试通过自己在setState函数中设置变量来查看它是否与struct有关，但这给出了相同的结果：

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

    console.log(value);

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

控制台日志：

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/",
}

我有点卡在这一点上，我希望有人可以帮我

Answer 1

setState是异步执行console.log(this.state); 将返回旧数据。

setState（）不会立即使this.state发生突变，但会创建一个挂起的状态转换。 调用此方法后访问this.state可能会返回现有值。 无法保证对setState的调用的同步操作，并且可能会为提高性能而批量调用。

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

  console.log(value);

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

}

演示

 <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))