this.setState не запускает повторную визуализацию в компоненте

Question

У меня есть компонент, содержащий кнопку 'logout', которая удаляет некоторые переменные из localStorage, а затем обновляет состояние компонента. Кажется, он не запускает рендеринг после обновления состояния.

Я использую состояние для рендеринга либо кнопки выхода из системы, либо компонента <Redirect/> с реактивного маршрутизатора.

Я поместил свой метод в событие onClick кнопки и использовал .bind(this) для сохранения контекста.

Компонент не выполняет повторную визуализацию при изменении состояния, даже когда я вызываю this.forceUpdate() из обратного вызова setState.

Есть что-нибудь, что я мог сделать неправильно?

import React, { Component } from "react";
import {NavLink, Redirect} from 'react-router-dom';
import ProtectedRoute from "../hoc/ProtectedRoute";
import Explain from "./Explain";
import User from "../util/User";
import Environment from "./Environment.js";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: true};
    }

    logout(){
        User.erase();
        this.setState({loggedIn: false}, () => {
            console.log("is logged in true? ", this.state.loggedIn === true);
            this.forceUpdate(() => { console.log("forcupdate complete") });
        });
    }

    render(){
        return <div className="authenticated">
            <nav className="navigation-bar">
                <div className="nav-grp">
                    <NavLink activeClassName="active" to="/home/explain">Explain</NavLink>
                    <NavLink activeClassName="active" to="/home/environment">Environment</NavLink>
                </div>
                <div>
                    { this.state.loggedIn === true ? "In" : "Out" }
                    { this.state.loggedIn === true
                        ? <a onClick={this.logout.bind(this)}>Logout</a>
                        : <Redirect from="/home" to="/register"/>
                    }
                </div>
            </nav>
            <div className="view container">
                <ProtectedRoute path={["/home/explain/:explain","/home/explain"]} authorized={User.registered()} component={Explain}/>
                <ProtectedRoute path="/home/environment" authorized={User.registered()} component={Environment}/>
            </div>
        </div>
    }
}

export default Home;

Исходя из вышесказанного, при входе в этот компонент я ожидаю увидеть «in» и кнопку выхода из системы. При нажатии на нее я ожидал, что меня перенаправят обратно на мой компонент по адресу /register url. Вместо этого не похоже, что происходит рендеринг, так как я продолжаю видеть кнопку выхода из системы и никуда не перенаправлен.

Вы можете видеть выше, что я поставил console.log s в обратных вызовах setState и forceUpdate. Для записи, 'зарегистрирован в истине?' сообщение печатается, но сообщение «forceUpdate complete» не печатается.

Спасибо за вашу помощь!

Answer 1

Это на мне. Компонент, который мы перенаправляем на /register, похоже, перенаправляет нас обратно на /home, который является компонентом выше. Я собираюсь реорганизовать, как обрабатываются пользовательские сессии, поэтому у меня нет этой проблемы.

Извините, переполнение стека!

Если у кого-то есть похожая проблема, примерно то, что происходит: Форма регистрации отправляется, мы храним токен пользователя в localStorage и в состоянии компонента регистра. Затем мы перенаправляем на /home.

Нажав кнопку выхода в компоненте Home, мы удаляем токен из localStorage и перенаправляем в /register.

.

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