三元评估不正确

时间:2019-10-23 07:45:34

标签: javascript reactjs redux react-redux

我正在制作一个导航栏组件,如果用户通过了验证,该组件应该显示一组链接,而如果用户未通过,则显示另一组链接。显示的链接不会根据状态的值而改变。我该如何解决这个问题?

尝试切换我的减速器状态,似乎没有任何影响链接。

import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logout } from "../../actions/auth";

const Navbar = ({ auth: isAuthenticated, loading }, logout) => {
  const guestLinks = (
    <ul>
      <li>
        <Link to="/landing">
          <i className="fas fa-car" /> Ruber
        </Link>
      </li>
      <li>
        <Link to="/register">
          <i className="fas fa-pen" /> Register
        </Link>
      </li>
      <li>
        <Link to="/login">
          <i className="fas fa-sign-in-alt" /> Login
        </Link>
      </li>
    </ul>
  );

  const authLinks = (
    <ul>
      <li>
        <i className="fas fa-home" />
        <Link to="/home"> Home</Link>
      </li>
      <li>
        <i className="fas fa-history" />
        <Link to="/rides"> Past Rides</Link>
      </li>
      <li>
        <i className="fas fa-route" />
        <Link to="/create"> Request ride</Link>
      </li>
      <li>
        <i className="fas fa-user" />
        <Link to="/user"> User Info</Link>
      </li>
      <li>
        <i className="fas fa-sign-out-alt" />
        <Link to="/landing"> Log Out </Link>
      </li>
    </ul>
  );

  return (
    <nav>
      {!loading && (
        <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
      )}
    </nav>
  );
};

Navbar.propTypes = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

   const mapStateToProps = state => ({
      auth: state.auth
    });
    export default connect(
      mapStateToProps,
      { logout }
     )(Navbar);

导航栏应在guestLinks和authLinks之间来回切换

0 个答案:

没有答案