은 JS 프로그램 반작용 : 주

Question

안녕 타일러 Mcginess으로 ReactJS 기초 과정을하고 있어요

하는과 같이 제출하는 형태로,

function Prompt (props) { 
    return (
     <div> 
     <h3>{ props.header }</h3> 
     <div> 
      <form onSubmit={ props.onSubmitUser } > 
      <div> 
       <input 
       type="text" 
       placeholder="Github Username" 
       onChange={ props.onUpdateUser } 
       value={ props.username } 
       /> 
      </div> 
      <div> 
       <button type="submit" > 
       Continue 
       </button> 
      </div> 
      </form> 
     </div> 
     </div> 
    ); 
    } 

그리고 제출 처리 할 수있는 기능이 있습니다이,

입니다

handleOnSubmitUser: function (e) { 
    e.preventDefault(); 

    // if back button pressed. 
    var username = this.state.username; 
    this.setState({ 
     username: "" 
    }) 

    // push state 
    if (this.props.routeParams.playerOne) { 
     this.context.router.push({ 
     pathname: "/battle", 
     query: { 
      playerOne: this.props.routeParams.playerOne, 
      playerTwo: this.state.username 
     } 
     }) 
    } else { 
     this.context.router.push("/playerTwo/" + this.state.username) 
    } 
    }, 

내가 갖고있는 질문은 사용자 이름을 캐싱 한 후에 사용자 이름의 상태를 재설정하면 전투 경로에 사용자 이름이 전달되는 이유는 무엇입니까?, 현재 코드를 입력하고 빈 문자열을 사용자 이름으로 사용해서는 안됩니다. 그것은 setState에서 방금 초기화 되었기 때문에 통과 되었습니까?

Answer 1

setState()을 호출하면 함수 실행이 끝나면 this.state이 수정됩니다. 그래서이 상태는 끝날 때까지 바뀌지 않을 것입니다. 따라서 this.state.username은 여전히 ​​유효합니다. React setState에서

참고

setState를()는 즉시 this.state 돌연변이 그러나 보류 상태 천이를 생성하지 않는다. 이 메소드를 호출 한 후 this.state에 액세스하면 잠재적으로 기존 값을 리턴 할 수 있습니다.

부록 : someFunc에서

this.setState(
{ username: "" }, 
this.someFunc 
) 

당신이 this.state에 액세스 할 수 있습니다, 그것은 : 당신은 어떤 방법 상태 업데이트 후 일어날하려는 경우, 당신은 지금처럼 setState에 콜백을 사용할 수 있습니다 새로 업데이트 된 값을 보유하므로 사용자 이름은 ""이됩니다.