Реагируйте HOC с асинхронным вызовом компонента визуализации перед логикой

Question

Я хотел бы отобразить компонент только тогда, когда у меня есть токен, и этот действует.Чтобы проверить, является ли токен действительным, я должен отправить запрос POST в API.Я сделал это внутри componentWillMount.Я также пытался поместить это в componentDidMount, но всегда он отображает сначала Redirect, а затем компонент, который вызывает эту ошибку в консоли: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method in Authenticate (created by Route). Я просто хотел бы отобразить компонент, если authenticated: true, иначе Redirect для маршрута входа в систему.

authCheck.js

export default (ComposedComponent) =>
    class Authenticate extends Component {

        state = {
            authenticated: false,
        };

        componentWillMount() {
            this.checkAndRedirect();
        }

        checkAndRedirect() {
            const token = localStorage.getItem('token') || null;
            const config = {
                headers: {"Authorization": `Bearer ${token}`}
            };
            if (token) {
                axios.post(
                    'https://alessandroarcidiaco.it/wp-json/jwt-auth/v1/token/validate',
                    null,
                    config
                )
                    .then(res => {
                        if (res.status === 200) {
                            this.setState({authenticated: true})
                        }
                    })
                    .catch(err => {
                        this.setState({authenticated: false})
                    })
            } else {
                this.setState({authenticated: false});
            }
        }

        render() {
            if (this.state.authenticated){
                return <ComposedComponent />
            }
            return <Redirect to="/login" />
        }
    }

Answer 1

Вы используете componentWillMount, который является небезопасным & устаревшим методом, и в котором вы должны избегать побочных эффектов .(из React Doc )

Как сказано в сообщении об ошибке, вы обновляете состояние не подключенного компонента: checkAndRedirect вызывает setState с до того, как компонент был смонтирован, потому что он был установленВызванный componentWillMount.

Вы должны использовать componentDidMount для таких действий и переосмыслить свой код, потому что, как вы сказали, вы всегда попадете в <Redirect to="/login" />.Инициализация authenticated на undefined и игра на true/false в вашем рендере могут сделать эту работу.

Answer 2

Появляется, что при первом запуске метода render () ваш "this.state.authenticated" имеет значение "false", поэтому вы перенаправлены на "/login".

Когда почтовый запрос вернется, а для «this.state.authenticated» будет установлено значение «true», вы уже будете иметь экран «/ login».

Вы можете исправить это, инициализировав «authenticated» в «undefined»

state = {
    authenticated: undefined,
};

И только перенаправление, если оно было "ложным"

render() {
    if (this.state.authenticated){
        return <ComposedComponent />
    } else if ( this.state.authenticated === false) { //pay attention on '===', it is not '=='
        return <Redirect to="/login" />
    } else {
        <p>Loading...</p>
    }
}