Question

我正在将状态-IsLoggedIn从App组件传递到Header组件。但是，无论何时触发onClick事件，IsLoggedIn都应该更改其状态。但是，这似乎没有发生。我不知道为什么这种情况持续发生？ App组件是否每次都用isLoggedIn为false来重新呈现自身？

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。改为这样做。

在您的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>
      <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;

或者，如果您希望保持header.js不变，则可以使用本地存储作为检查来相应地更新状态。在您的app.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>
 );
}

}

导出默认应用；

反应状态无法更新

1 个答案: