setState（）とその非同期性は私の友人ではありません...私は何ができますか？

Question

私のコードはひどくひどいものですが、ここで苦労していて、助けていただければ幸いです。基本的には、フォームを作成しようとしています。フォームの下部にあるボタンをクリックすると、状態に関する情報が表示されます。私はこれを三重項を介して試してみました - もしthis.state.displayが真であればtrue、偽ならフォームを表示します。

この問題は、setStateの非同期性に関係していると思います。 setStateが遅いため、this.state.displayは真にtrueに設定されることはありません。したがって、terniaryは実際には正しく実行されません。私はこれをどのように修正するのか分かりません。私はshouldComponentUpdateとcomponentWillUpdateを使って遊んだことがありますが、あまり役に立ちません。

誰にも提案はありますか？私はnewbですが、これは品質のコードから遠いことを認識しています。誰かの穏やかな指導が大好きです。ありがとう。

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

Answer 1

あなたはbuttonのonClickハンドラにfunctinを渡す必要があります。好ましくはここでは、この

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

Answer 2

のようなあなたのクラスの作業バージョンです：

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を呼んでいたということでした。あなたはそれを呼び出す関数を渡す必要があります。