Reactjs setState（）及其异步性质不是我的朋友。。。我能做什么？

我知道我的代码很糟糕，但我在这里很挣扎，希望能得到一些帮助。基本上，我正在尝试创建一个表单，单击底部的按钮后，它将显示状态信息。我尝试通过三元函数来实现这一点，如果this.state.display为true，它将显示为true，如果为false，它将显示表单

我相信这个问题与setState的异步性质有关。因为setState很慢，所以this.state.display永远不会真正设置为true，因此terniary永远不会真正正确执行。我只是不知道该怎么解决这个问题。我已经玩过shouldComponentUpdate和componentWillUpdate，但这没有多大帮助

有人有什么建议吗？我是一个新手，认识到这远远不是高质量的代码。我只是喜欢有人温柔的引导。谢谢

class Application extends React.Component {
  constructor(props){
  super(props)

  this.state = {
    display: false,
    firstName : "",
    lastName : "",
    phone : null,
    email : "",
    };


  }

  shouldComponentUpdate() {
    if (this.state.display) {
    return true;
}
return false;
}


  render() {




return (
  { this.state.display ? 
   <div>
     <h1>{this.state.firstName}</h1>
     <h1>{this.state.lastName}</h1>
     <h1>{this.state.phone}</h1>
     <h1>{this.state.email}</h1>
   </div> : 

  <div className="header">

  <h1>Greetings!</h1>
  </div>
    <div className="inputform">
      <input placeholder="First Name" onChange={(e) => {this.setState({firstName: e.target.value})}} />
      <input placeholder="Last Name" onChange={(e) => {this.setState({lastName:e.target.value})}} />
      <input placeholder="Phone Number" onChange={(e) => {this.setState({phone:e.target.value})}} />
      <input placeholder="Email Address" onChange={(e) => {this.setState({email:e.target.value})}} />


      <button onClick={this.setState({display: true})}>Submit</button>
    </div>







  }



 ); 
  }
}



ReactDOM.render(<Application />
  , document.getElementById('app'));

---

您需要向按钮的onClick处理程序传递一个functin。最好是这样

handler = () => {
  this.setState({display: true})
}
render(){
    <button onClick={this.handler}>Submit</button>
}

---

以下是您的班级的工作版本：

class Application extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      display: false,
      firstName : "",
      lastName : "",
      phone : null,
      email : "",
    };
  }
  _renderForm() {
    return (
      <div>
        <div className="header">
          <h1>Greetings!</h1>
        </div>
        <div className="inputform">
          <input placeholder="First Name" onChange={(e) => {this.setState({firstName: e.target.value})}} />
          <input placeholder="Last Name" onChange={(e) => {this.setState({lastName:e.target.value})}} />
          <input placeholder="Phone Number" onChange={(e) => {this.setState({phone:e.target.value})}} />
          <input placeholder="Email Address" onChange={(e) => {this.setState({email:e.target.value})}} />
          <button onClick={ () => this.setState({ display: true }) }>Submit</button>
        </div>
      </div>
    );
  }
  _renderData() {
    return (
      <div>
        <h1>{this.state.firstName}</h1>
        <h1>{this.state.lastName}</h1>
        <h1>{this.state.phone}</h1>
        <h1>{this.state.email}</h1>
      </div>
    )
  }
  render() {
    return this.state.display ? this._renderData() : this._renderForm();
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

主要问题是在渲染过程中立即调用setState。而您应该传递一个调用它的函数。

在您的按钮单击处理程序中使用this.setState应该反复触发并使浏览器停止，并创建反复的控制台警告。我同意其他的答案，但我只是好奇是否真的是这样。