阵营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可能会返回现有值。

附录：如果你想一些方法来状态更新后发生，你可以在setState使用回调，像这样：

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

在someFunc您可以访问this.state，并且它将保存最新更新的值，因此用户名将为“”。