React JS Program：State

Question

您好，我正在接受Tyler 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不会改变直到最后。因此this.state.username仍然有效。

来自React setState的注释：

  

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

附录：如果您希望某些方法在状态更新后发生，您可以在setState中使用回调，如下所示：

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

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