Когда пользователь входит в систему, кнопка выхода должна отображаться, но она не отображается мгновенно. Почему это происходит?

Question

import React, { Component } from 'react';
import { Link, withRouter } from "react-router-dom"
import { connect } from "react-redux"
import { compose } from "redux"


class Header extends Component {

    handleLogout = (event) => {
        event.preventDefault()
        localStorage.clear()
        this.props.history.push("/")
    }

    render() {
        // const token = this.props.authReducer.user && this.props.authReducer.user.user.token 
        return (
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div>
                    App
                </div>
                <div>
                    {
                        localStorage.token ?
                            <div>
                                <Link to="/">Home</Link>
                                <Link to="/login">Sign in</Link>
                                <Link to="/register">Sign up</Link>
                                <button onClick={this.handleLogout}>Logout</button>
                            </div>
                            :
                            <div>
                                <Link to="/">Home</Link>
                                <Link to="/login">Sign in</Link>
                                <Link to="/register">Sign up</Link>
                            </div>
                    }
                </div>
            </div>
        );
    }
}

const mapStateToProps = (store) => {
    return store
}


export default compose(
    withRouter,
    connect(mapStateToProps)
)(Header);

После входа в систему требуется некоторое время, чтобы получить ответ и, следовательно, токен в localStorage, поэтому я получаю это, нет? Мне нужно один раз обновить sh, чтобы отобразить его в заголовке.

Кроме того, я попытался использовать избыточное хранилище, но после обновления избыточное хранилище не сохраняется.

Answer 1

Можете ли вы использовать значения состояния также для проверки выхода из системы, см. Мой пример ниже

{ ( (localStorage.token === '') || (this.state.loggedIn === false)  )?
    <div>
        <Link to="/">Home</Link>
        <Link to="/login">Sign in</Link>
        <Link to="/register">Sign up</Link>
    </div>    
    :
    <div>
        <Link to="/">Home</Link>
        <Link to    ="/login">Sign in</Link>
        <Link to="/register">Sign up</Link>
        <button onClick={this.handleLogout}>Logout</button>
    </div>
}

Функция, которую я изменил, как указано ниже

handleLogout = (event) => {
    event.preventDefault();
    localStorage.clear();
    this.setState({loggedIn : false });
    this.props.history.push("/");
}

Answer 2

Он не работает мгновенно, потому что компонент React не получает изменения сразу от localstorage, вместо этого вы можете использовать состояние.

....

class Header extends Component {
  state = { loggedIn: false }
  componentDidMount () {
    if(localStorage.token) {
      this.setState({ loggedIn: true })
    }
  }

  handleLogout = (event) => {
    event.preventDefault()
    localStorage.clear()
    this.setState({ loggedIn: false })
    this.props.history.push("/")
  }

  render() {
        const { loggedIn } = this.state
        return (
            <div style={{ display: "flex", justifyContent: "space-between" }}>
                <div>
                    App
                </div>
                <div>
                    {
                        loggedIn ?
                            <div>
                                <Link to="/">Home</Link>
                                <Link to="/login">Sign in</Link>
                                <Link to="/register">Sign up</Link>
                                <button onClick={this.handleLogout}>Logout</button>
                            </div>
                            :
                            <div>
                                <Link to="/">Home</Link>
                                <Link to="/login">Sign in</Link>
                                <Link to="/register">Sign up</Link>
                            </div>
                    }
                </div>
            </div>
        );
    }
....

Answer 3

Так как вы хотите перерисовать ваш компонент. Таким образом, повторный рендеринг может быть запущен, только если состояние компонента изменилось. Состояние может меняться от смены реквизита или от прямого изменения setState. Компонент получает обновленное состояние, и React решает, должен ли он повторно визуализировать компонент. Поэтому либо вы можете хранить детали, как для входа в систему вы можете хранить в состоянии или в реквизитах. Так что в вашем случае все детали можно хранить в локальном хранилище. Просто установите флаг isLogged в true / false в зависимости от того, и соответственно вы можете показать кнопку.

Примечание: не поймите неправильно и удалите все детали из локального хранилища или куки, как на странице refre sh состояние потеряно

Answer 4

handleLogout = (event) => {
    event.preventDefault();
    localStorage.clear();
    this.setState({
    loggedIn : false
 },()=>this.props.history.push("/"));

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