setState() 及其异步性质不是我的朋友……我该怎么办？答案

【问题标题】：setState() and its async nature is not my friend... what can I do?setState() 及其异步性质不是我的朋友……我该怎么办？
【发布时间】：2017-12-30 17:47:42
【问题描述】：

我知道我的代码很糟糕而且很糟糕，但我在这里苦苦挣扎，希望能得到一些帮助。基本上，我正在尝试创建一个表单，单击底部的按钮后，它将显示有关状态的信息。我尝试通过三元组来执行此操作 - 如果 this.state.display 为真，它将显示为真，如果为假，它将显示表单。

我相信问题与 setState 的异步特性有关。因为 setState 很慢，所以 this.state.display 永远不会真正设置为 true，因此三元组永远不会真正正确执行。我只是不知道如何解决这个问题。我玩过 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'));

【问题讨论】：

在您的button 点击处理程序中使用this.setState 应该反复触发并让您的浏览器停止运行并产生重复的控制台警告。我同意其他答案，但我只是好奇这是否正在发生。

标签： reactjs setstate

【解决方案1】：

这是您的课程的工作版本：

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。虽然你应该传递一个调用它的函数。

【讨论】：

【解决方案2】：

您需要将函数传递给button 的onClick 处理程序。最好是这样的

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

【讨论】：