javascript - 在函数中设置状态不会触发重新渲染

Question

我想在用户登录时创建加载指示器，但由于某种原因，JSX 条件元素没有更新:

class LoginPage extends Component {

  constructor (props) {
    super(props)
    this.state = {
      waitingOnLogin: false,
      ...
    }

    this.handleLogin = this.handleLogin.bind(this)
  }

  handleLogin (event) {
    event.preventDefault()
    this.state.waitingOnLogin = true
    this.props.userActions.login(this.state.email, this.state.password)
  }

  render() {
    return (
      <div className='up'>
        <form onSubmit={e => this.handleLogin(e)}> ... </form>
        {this.state.waitingOnLogin && <Spinner message='Logging you in'/>} // This does not appear
      </div>
    )
  }
}

为什么 JSX 会忽略 waitingOnLogin？

Answer 1

不要直接使用setState改变状态。 setState 调用重新渲染，因此之后您的更改将反射(reflect)，但直接分配不会发生重新渲染，因此不会反射(reflect)任何更改。另外，您应该始终使用 setState 来更改状态

handleLogin (event) {
    event.preventDefault()
    this.setState({waitingOnLogin:true});
    this.props.userActions.login(this.state.email, this.state.password)
  }