componentWillReceiveProps trạng thái khác với trạng thái hiển thị sau khi cập nhật trạng thái redux

Question

Trước hết, tất cả mã có liên quan (nhấp vào tên tệp cho mã nguồn đầy đủ của tệp đó).

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 (giảm)

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

Dòng chảy rất đơn giản:

1. Người dùng mở trang.
2. Người dùng nhấp vào <button /> gọi số authenticationActionCreator.login.

Các console.log đầu ra là:

Dự kiến ​​console.log đầu ra là:

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 

Vấn đề là render có tình trạng chính xác (tình trạng sau khi AUTHENTICATION.LOGIN_SUCCESS) và componentWillReceiveProps có trạng thái cũ (trạng thái sau AUTHENTICATION.LOGIN_REQUEST).

Tôi là cuộc gọi cuối cùng tới componentWillReceiveProps để có cùng một đối tượng trạng thái như phương thức render.

Đây có phải là:

• một lỗi
• Tôi đang làm một cái gì đó sai
• mong đợi của tôi là sai

?

Answer 1

Nó đã cho tôi viết tất cả điều này debug dấu vết/câu hỏi để nhớ rằng componentWillReceiveProps API là:

componentWillReceiveProps: function(nextProps) {} 

Nói cách khác, LoginView.js ví dụ của tôi cần phải có được:

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