setState() 및 그 비동기 성질은 내 친구가 아닙니다 ... 어떻게해야합니까?

Question

내 코드가 끔찍하고 끔찍하다는 것을 알고 있지만 여기에 어려움을 겪고 있으며 도움을 얻을 수 있습니다. 기본적으로 폼을 만들려고합니다. 아래쪽의 단추를 클릭하면 상태에 대한 정보가 표시됩니다. 나는 삼중 문자를 통해 이것을 시도했다. 만약 this.state.display가 true이면 true로 표시되고 false이면 양식이 표시된다.

이 문제는 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')); 

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 즉시 동안 렌더링 호출 된 것이 었습니다. 반면에 호출하는 함수를 전달해야합니다.