componentWillReceiveProps状態が還元状態更新後のレンダリング状態と異なる

Question

まず、関連するすべてのコード（そのファイルの完全なソースコードのファイル名をクリックします）。

LoginView.js

LoginView = class extends React.Component { 
    handleLogin = (email, password) => { 
     this.props.authenticationActionCreator.login(email, password); 
    }; 

    componentWillMount() { 
     console.log('componentWillMount', 'this.props.isAuthenticated', this.props.isAuthenticated); 
    } 

    componentWillReceiveProps() { 
     console.log('componentWillReceiveProps', 'this.props.isAuthenticated', this.props.isAuthenticated); 
    } 

    render() { 
     let { 
      errorMessage, 
      isAuthenticating 
     } = this.props; 

     return <div> 
      <p>this.props.isAuthenticated: {this.props.isAuthenticated ? 'true' : 'false'}</p> 
      <button onClick={() => { 
       this.handleLogin('gajus@applaudience.com', 'nosyte'); 
      }}>Login</button> 
     </div>; 
    } 
}; 

authentication.js（減速）

if (action.type === 'AUTHENTICATION.LOGIN_SUCCESS') { 
    return initialState.merge({ 
     isAuthenticated: true, 
     token: action.data.token, 
     user: action.data.user 
    }); 
} 

authenticationActionCreator.js

authenticationActionCreator.loginSuccess = (token) => { 
    let decodedToken; 

    // @todo Handle failure to decode token. 

    decodedToken = jwtDecode(token); 

    localStorage.setItem('token', token); 

    return { 
     type: 'AUTHENTICATION.LOGIN_SUCCESS', 
     data: { 
      token, 
      user: decodedToken.user 
     } 
    }; 
}; 

流れは単純である：

1. ユーザーがページを開きます。
2. authenticationActionCreator.loginを呼び出す<button />をクリックします。

console.log出力である：

期待console.log出力である：

componentWillMount this.props.isAuthenticated true 
action AUTHENTICATION.LOGIN_REQUEST @ 16:52:50.880 
componentWillReceiveProps this.props.isAuthenticated false 
action AUTHENTICATION.LOGIN_SUCCESS @ 16:52:51.975 
componentWillReceiveProps this.props.isAuthenticated true 

問題はrenderが正しい状態（AUTHENTICATION.LOGIN_SUCCESS後の状態）を有し、componentWillReceivePropsが有することです旧状態（AUTHENTICATION.LOGIN_REQUEST以降の状態）。

componentWillReceivePropsの最後の呼び出しは、renderメソッドと同じ状態オブジェクトを持つことです。

はこれです：

• 私は私の期待が

falseです

何か間違ったことをやっている

バグ？

Answer 1

それはcomponentWillReceiveProps APIがあることを覚えておくことは、すべてこのデバッグトレース/質問を書いてくれました：つまり

componentWillReceiveProps: function(nextProps) {} 

を、私LoginView.jsの例では、されている必要があります：

LoginView = class extends React.Component { 
    handleLogin = (email, password) => { 
     this.props.authenticationActionCreator.login(email, password); 
    }; 

    componentWillReceiveProps (nextProps) { 
     console.log('componentWillReceiveProps', 'nextProps.isAuthenticated', nextProps.isAuthenticated); 
    } 

    render() { 
     let { 
      errorMessage, 
      isAuthenticating 
     } = this.props; 

     return <div> 
      <p>this.props.isAuthenticated: {this.props.isAuthenticated ? 'true' : 'false'}</p> 
      <button onClick={() => { 
       this.handleLogin('gajus@applaudience.com', 'nosyte'); 
      }}>Login</button> 
     </div>; 
    } 
};