Переадресация на страницу входа в систему, если она не вошла в систему, вызывает ошибку перехода состояния

Question

Я изо всех сил пытаюсь понять, как правильно перенаправить на страницу входа, когда пользователь не выполнил вход в систему, используя React и Redux.

В настоящее время в конструкторе компонента я проверяю, установлено ли имя пользователя, а если нет, я использую routeActions, предоставленный redux-simple-router, для перенаправления на страницу входа. Однако, я получаю эту ошибку:

Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. 

Я понимаю, что следует избегать установки состояния внутри функции рендеринга. но я не уверен, где я должен обнаружить и перенаправить. Я также попытался проверить состояние аутентификации в componentWillReceiveProps и ComponentWillMount, но не повезло.

// WordListContainer.js 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import {routeActions} from 'redux-simple-router'; 

import WordList from '../components/Words/WordList'; 
import {addWord, editWord, deleteWord, fetchWords} from '../actions/words'; 

function mapStateToProps(state) { 
    return { 
    auth: state.auth, 
    words: state.words 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    router: bindActionCreators(routeActions, dispatch), 
    actions: bindActionCreators({ 
     addWord, editWord, deleteWord, fetchWords 
    }, dispatch) 
    }; 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(WordList); 

и

// WordList.js 
import React, {Component} from 'react'; 
import {Link} from 'react-router'; 
import WordListItem from './WordListItem'; 

export default class WordList extends Component { 
    constructor(props) { 
    super(props); 

    if(!this.props.auth.username) { 
     // This redirection causes the error 
     this.props.router.push('/login'); 
    } 
    } 

    render() { 
    ... 
    } 
} 

Есть хорошее место, где я могу проверить состояние и перенаправить еще до того, пытаясь оказать компонент? Возможно, каким-то образом использовать объект контейнера, хотя я не совсем уверен, как это сделать, когда у меня есть доступ к состоянию и отправке.

Answer 1

попробуйте компонент componentDidUpdate(), поскольку этот метод жизненного цикла всегда будет вызываться всякий раз, когда изменяется состояние.