は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> 
    ); 
    } 

、Submitを扱うための機能があり、この、

です

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にアクセスすると、潜在的に既存の値が返される可能性があります。あなたがthis.stateにアクセスすることができますsomeFuncで

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

、それ：

補遺：あなたは、いくつかの方法が後の状態の更新を発生する場合は、あなたがそうのように、setStateでコールバックを使用することができます新たに更新された値を保持するので、usernameは ""になります。