Question

下面是我项目的react组件的代码。返回组件时this.props.isAuthenticated工作正常，但是在componentDidMount中打印this.props.isAuthenticated时却报错（打印注销）。如何在react组件中获得身份验证状态为真还是假？

我已经添加了redux，并且登录注销工作正常。

import React, { Component } from "react";
import { NavLink, Route, withRouter } from "react-router-dom";
import NewsListView from "../Container/NewsListView";
import StatsView from "../Container/StatsView";
import VotingView from "../Container/VotingView.js";
import Rightsidebar from "../Container/rightsidebar";
import Footer from "./footer";
import Loginform from "../Container/loginform";
import SignUp from "../Container/SignUp";
import { connect } from "react-redux";
import * as actions from "../Store/actions/auth";

class Header extends React.Component {
  componentDidMount() {
    {
      this.props.isAuthenticated ? console.log("login") : console.log("logout");
    }
  }
  render() {
    return (
      <div>
        <nav className="navbar navbar-inverse">
          <div className="container-fluid">
            <div className="navbar-header">
              <button
                type="button"
                className="navbar-toggle"
                data-toggle="collapse"
                data-target="#myNavbar"
              >
                <span className="icon-bar" />
                <span className="icon-bar" />
                <span className="icon-bar" />
              </button>
              <NavLink className="navbar-brand" to="/">
                Save4thPillar
              </NavLink>
            </div>
            <div className="collapse navbar-collapse" id="myNavbar">
              <ul className="nav navbar-nav">
                <li>
                  <NavLink to="/" className="navlink">
                    Home
                  </NavLink>
                </li>

                <li>
                  <NavLink to="/news" className="navlink">
                    news
                  </NavLink>
                </li>
                <li>
                  <NavLink to="/stats" className="navlink">
                    stats
                  </NavLink>
                </li>
                {this.props.isAuthenticated ? (
                  <li>
                    <NavLink
                      to="/logout"
                      onClick={this.props.logout}
                      className="navlink"
                    >
                      Logout
                    </NavLink>
                  </li>
                ) : (
                  <li>
                    <NavLink to="/login" className="navlink">
                      Login
                    </NavLink>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </nav>
        <div className="container">
          <div className="row">
            <div className="col-md-8">
              <Route exact path="/" component={VotingView} {...this.props} />
              <Route exact path="/news" component={NewsListView} />
              <Route exact path="/stats" component={StatsView} />
              <Route exact path="/login" component={Loginform} />
              <Route exact path="/signup" component={SignUp} />
            </div>
            <div className="col-md-4">
              <Rightsidebar />
            </div>
            <div />
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    logout: () => dispatch(actions.logout())
  };
};

export default withRouter(
  connect(
    null,
    mapDispatchToProps
  )(Header)
);

Answer 1

您应该实现Header组件的构造函数。 to use props in lifecycles

class Header extends React.Component {
  componentDidMount() {
  {
    this.props.isAuthenticated ? console.log("login") : console.log("logout");
  }

  constructor(props){
    super(props);
  }
  [...]
}

如何在React JS组件中获取身份验证状态？

1 个答案: