設定功能狀態不觸發重新呈現

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

爲什麼waitingOnLogin被忽略由JSX？

Answer 1

不要突變狀態直接使用setState。 setState要求重新提交，因此在此之後，您的更改將反映出來，但直接分配不會發生rerender，因此不會發生變化。另外你應該總是使用setState改變狀態

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

Answer 2

始終使用setState更新state值，不會直接發生變異的state值，使用此：

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

按DOC

：

不要直接變異this.state，作爲調用的setState （）之後可能會用 替換你所做的變異。對待這個狀態，就好像它是不可變的 。

查看有關setState的詳細信息。