Question

我正在尝试更新导航组件中的状态，以在设置Cookie时显示“注销”。唯一的问题是，如果不刷新整个页面就无法获取Cookie。有没有办法让我不刷新就获取Cookie？下面的代码显示了我如何获取Cookie并设置状态。

已更新代码：

import React, {Component} from 'react';

import './NavigationItems.css';

import Logo from '../../Logo/Logo';

import { Route, Link } from 'react-router-dom';

import PortalFindSubscriber from '../../../containers/Portal/PortalFindSubscriber';

import Login from "../../../components/Login/Login";

import Register from "../../../components/Register/Register";

import Reset from "../../../components/Reset/Reset";

import ResetConfirm from "../../../components/Reset/ResetConfirm";

import Aux from '../../../hoc/Aux/Aux';

import Cookies from 'universal-cookie';

const cookies = new Cookies();

class navigationItems extends Component{
  constructor() {
    super();
    this.updateLoggedStatus = this.updateLoggedStatus.bind(this)
  }
  state = {
        isLogged: false,
    };
  componentDidMount() {
    this.setState({isLogged: true});
    console.log(this.state.isLogged);
    this.updateLoggedStatus();

  }
  Collapse (e) { 
    const body = document.body;
    const collapseBtn = e.target;
    const collapsedClass = "collapsed";
    collapseBtn.getAttribute("aria-expanded") === "true"
    ? collapseBtn.setAttribute("aria-expanded", "false")
    : collapseBtn.setAttribute("aria-expanded", "true");
  collapseBtn.getAttribute("aria-label") === "collapse menu"
    ? collapseBtn.setAttribute("aria-label", "expand menu")
    : collapseBtn.setAttribute("aria-label", "collapse menu");
    body.classList.toggle(collapsedClass);
  };

  Toggle(e){
    const body = document.body;
    const toggleMobileMenu = e.target;
 
    toggleMobileMenu.getAttribute("aria-expanded") === "true"
      ? toggleMobileMenu.setAttribute("aria-expanded", "false")
      : toggleMobileMenu.setAttribute("aria-expanded", "true");
    toggleMobileMenu.getAttribute("aria-label") === "open menu"
      ? toggleMobileMenu.setAttribute("aria-label", "close menu")
      : toggleMobileMenu.setAttribute("aria-label", "open menu");
    body.classList.toggle("mob-menu-opened");

  }
  
  onSignOutClick = () =>{
    cookies.remove('AccessToken');
    this.setState({isLogged: false});
  }
 updateLoggedStatus() {
   this.setState({ isLogged: true });
  }
  render () {
    cookies.addChangeListener(console.log(cookies.get('AccessToken')));
   console.log(this.state.isLogged);
    //const { isLogged } = this.state;
    return(
            <Aux>
      
      <header className="pageHeader">
        <nav>
          <Link to={"/"}>
            <Logo />
          </Link>
          <button className="toggle-mob-menu" aria-expanded="false" aria-label="open menu" onClick={this.Toggle}>
            <svg width="20" height="20" aria-hidden="true">
              <use xlinkHref="#down"></use>
            </svg>
          </button>
          <ul className="adminMenu">
            <li className="menuHeading">
              <h3>Admin</h3>
            </li>
            {cookies.get('AccessToken')!==undefined?
            <>
                       
            <li>
              <Link to={"/"} onClick={this.onSignOutClick}>
              
                <div class="material-icons" style={{marginRight: 10}}>
                  login
                </div>

                <span>Log Out</span>
              </Link>
            </li>
            </>
            :<li>
              <Link to={"/"}>
                <svg>
                  <use xlinkHref="#users"></use>
                </svg>
                <span>Log In</span>
              </Link>
            </li>}
            <li>
              <button className="collapse-btn" aria-expanded="true" aria-label="collapse menu" onClick={this.Collapse}>
                <svg aria-hidden="true">
                  <use xlinkHref="#collapse"></use>
                </svg>
                <span>Collapse</span>
              </button>
            </li>
          </ul>
        </nav>
      </header>
      <Route exact path="/" component={Login} />
      <Route exact path="/terms" component={Register} />
      <Route exact path="/reset" component={Reset} />
      <Route exact path="/reset_confirm" component={ResetConfirm} />
      <Route exact path="/find" component={PortalFindSubscriber} />
</Aux>
    );
  }
}

export default navigationItems;

Answer 1

您应该使用

boolean shouldComponentUpdate(object nextProps, object nextState)

决定是否应更新组件。

对于可行的解决方案，您可以使用功能组件的UseEffect回调来更新状态

反应更新状态而不刷新

1 个答案: