Question

我正在尝试更新React应用的状态

class App extends Component {
constructor(props) {
super(props);
this.state = {
  chatid: 0,
  uniqueid: 0,
  safe: 0
};
}

这是我要用来更改状态的函数。

 return_uniqueid() {
console.log("entered function:unique_ID");
var tempid = Math.floor(Math.random() * 1000 + 1);
console.log("tempid:" + tempid);
this.setState({ uniqueid: tempid });
console.log("uniqueid: " + this.state.uniqueid);
}

这是控制台的输出

  entered function:unique_ID 
  tempid:714 
  uniqueid: 0

uniqueid的值不会改变。如何更改uniqueid的值？

我从这里调用函数：

   <form>
      <fieldset>
        <button onClick={this.return_uniqueid.bind(this)}>
          get your ID
        </button>
        <h3 id = "idHeading">your ID is: </h3>
      </fieldset>
    </form>

Answer 1

this.setState本质上是异步的。因此，您不会在下一条语句中获得更新的值。

您可以使用回调函数获取更新状态。

this.setState({ uniqueid: tempid }, () => {
   console.log(this.state.uniqueid); //This will log update value
});

您的问题中也有错字

return_uniqueid() {
   console.log("entered function:unique_ID");
   var tempid = Math.floor(Math.random() * 1000 + 1);
   console.log("tempid:" + tempid);
   this.setState({ uniqueid: tempid });
   //you are printing this.state.chatid which is never changed.
   console.log("uniqueid: " + this.state.chatid);
}

Answer 2

您不需要在那里使用表格...没有输入或类似的东西...这只是一个简单的按钮...此外，如果您执行箭头功能，也不需要绑定...

更改为此，它将起作用：

class App extends Component {
  state = { chatid: 0, uniqueid: 0, safe: 0 };

  handleGetId = () => {
    console.log('entered function:unique_ID');
    var tempid = Math.floor(Math.random() * 1000 + 1);
    console.log('tempid:' + tempid);
    this.setState({ uniqueid: tempid });
    console.log('uniqueid: ' + this.state.chatid);
  };

  render() {
    return (
      <div>
        <h3 id="idHeading">your ID is: {this.state.uniqueid} </h3>
        <button onClick={this.handleGetId}>get your ID</button>
      </div>
    );
  }
}

以下是一个可行的示例：https://codesandbox.io/s/8267jjy4oj

Answer 3

您不会获得下一条语句的更新状态值。

使用回调函数

this.setState({ uniqueid: tempid }, () => { console.log("uniqueid: ", this.state.uniqueid);});

检查渲染中的状态值，因为每当状态更新时，都会自动调用render方法。因此，您可以在render方法中检查所需的值。只需将控制台日志放入render方法中即可。
```
render() {  console.log("uniqueid: ", this.state.uniqueid);}
```

Answer 4

您应该清楚setState何时使用它以及为什么使用它。因此，我认为这将帮助您纠正混乱。 “了解ReactJS — setState” @btmpl https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b

如何使用this.setState更新React应用的状态

4 个答案: