Состояние реакции невозможно обновить

Question

Я передаю состояние IsLoggedIn из компонента App в компонент Header. Но всякий раз, когда срабатывает событие onClick, IsLoggedIn должен изменить свое состояние. Но, похоже, этого не происходит. Я не знаю, почему это продолжается? Компонент приложения повторно отображает себя, при этом isLoggedIn каждый раз оказывается ложным?

App. js

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from "react-router-dom";

import Header from './Header';
import DashBoard from './Dashboard';
import Home from './Home';

class App extends Component {
    constructor() {
        super();
        this.state = {
            isLoggedIn: false
        }
    }

    onEventClick = () => {
        if (this.state.isLoggedIn) {
            this.setState({isLoggedIn: false});
        }
        else {
            this.setState({isLoggedIn: true});
        }
    }

    render() {
        return (
            <BrowserRouter>
                <div className="container">
                    <Header onEventClick={this.onEventClick} LoggedInState={this.state.isLoggedIn}/>
                    <Route path="/" exact={true} component={Home}/> 
                    <Route path="/dashboard" exact={true} component={DashBoard}/>
                </div>
            </BrowserRouter>
        )
    }
}

export default App;

Header. js

import React, { Component } from 'react';
import { Link } from "react-router-dom";

class Header extends Component {
    constructor(props) {
        super(props);
    }

    renderContent() {
        if (this.props.LoggedInState) {
            return (
                <li>
                    <a onClick={this.props.onEventClick} href="/api/logout" style={{borderRadius: '12px'}} className="waves-effect waves-light btn-small green darken-1">
                        Log Out
                    </a>
                </li>
            );
        }
        else {
            return (
                <li>
                    <a href="/auth/spotify" onClick={this.props.onEventClick} style={{borderRadius: '12px'}} className="waves-effect waves-light btn green darken-1">
                        Log in with Spotify
                    </a>
                </li>
            );
        }
    }
    

    render() {
        return (
            <nav>
                <div className="nav-wrapper blue-grey darken-4" style={{paddingLeft: '4px'}}>
                    <Link to={this.props.LoggedInState ? '/dashboard' : '/'} className="brand-logo">TuneIn</Link>
                    <ul className="right">
                        {this.renderContent()}
                    </ul>
                </div>
          </nav>
        );
    }
}

export default Header;

Answer 1

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

В заголовке. js

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Header extends Component {
constructor(props) {
super(props);
}

renderContent() {
if (this.props.LoggedInState) {
  return (
    <li>
      <Link
        to="/api/logout"
        onClick={this.props.onEventClick}
        style={{ borderRadius: "12px" }}
        className="waves-effect waves-light btn-small green darken-1"
      >
        Log Out
      </Link>
    </li>
  );
} else {
  return (
    <li>
      <Link
        to="/auth/spotify"
        onClick={this.props.onEventClick}
        style={{ borderRadius: "12px" }}
        className="waves-effect waves-light btn green darken-1"
      >
        Log in with Spotify
      </Link>
    </li>
   );
 }
}

render() {
return (
  <nav>
    <div
      className="nav-wrapper blue-grey darken-4"
      style={{ paddingLeft: "4px" }}
    >
      <Link
        to={this.props.LoggedInState ? "/dashboard" : "/"}
        className="brand-logo"
      >
        TuneIn
      </Link>
      <ul className="right">{this.renderContent()}</ul>
    </div>
  </nav>
 );
}
}

export default Header;

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

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";

import Header from "./components/Header";
import DashBoard from "./components/Dashboard";
import Home from "./components/Home";

class App extends Component {
constructor() {
super();
this.state = {
  isLoggedIn: localStorage.getItem("isloggedIn") || false,
 };
}

onEventClick = () => {
const isLogged = localStorage.setItem("isloggedIn", true);
if (this.state.isLoggedIn === false) {
  this.setState({ isLoggedIn: true });
 } else {
  localStorage.removeItem("isloggedIn");
  this.setState({ isLoggedIn: false });
 }
 };

render() {
return (
  <BrowserRouter>
    <div className="container">
      <Header
        onEventClick={this.onEventClick}
        LoggedInState={this.state.isLoggedIn}
      />
      <Route path="/" exact={true} component={Home} />
      <Route path="/dashboard" exact={true} component={DashBoard} />
    </div>
  </BrowserRouter>
 );
}

}

экспортировать приложение по умолчанию;