Question

我可以轻松登录我的应用。问题是当我尝试注销时。它可以正确注销，但是在重定向时会抛出此错误： TypeError：无法读取未定义的属性“替换”

错误详情：

40 | signOut =（）=> {41 | auth.logoutAuthorizedUser（）; 42 | console.log（this）; 43 | this.props.history.replace（'/'）; | ^ 44 | }

这是我的组件

//Dependencies
import React, { Component } from 'react';

import './dash.scss';
// Components
import MainNav from '../Global/MainNav';
import MenuDash from '../Global/MenuDash';
import DashFooter from '../Global/DashFooter';
import ScrolToTop from '../Global/ScrolToTop';
import LogOutModal from '../Global/LogOutModal';
import Modal from '../Global/Modal';
import Home from './BoardComponents/WorkSection/Home/home';
import Registro from './BoardComponents/Registro/registro';
import Socios from './BoardComponents/WorkSection/Socios/socios';
import Config from './BoardComponents/WorkSection/Config/config';
import Items from './BoardComponents/WorkSection/Items/items';
import Lessons from './BoardComponents/WorkSection/Lessons/lessons';
import Membership from './BoardComponents/WorkSection/Membership/membership';
import Purchases from './BoardComponents/WorkSection/Purchases/purchases';
import Reports from './BoardComponents/WorkSection/Reports/reports';
import Sales from './BoardComponents/WorkSection/Sales/sales';
import Statics from './BoardComponents/WorkSection/Statics/statics';
import Users from './BoardComponents/WorkSection/Users/users';
import  { auth } from '../../services/auth.service';
// Fomrs Components

const Inititialstate = {
  showComponent: ''
}

class Dashboard extends Component {

  constructor(props){
    super(props);
    this.state = Inititialstate;
    this.signOut = this.signOut.bind(this);
  }


  signOut = () => {
    auth.logoutAuthorizedUser();
    console.log(this);
    this.props.history.replace('/');
  }

  renderDashBoard(){

    switch (this.state.showComponent) {
      case 'USERS':
        return <Users/>
      case 'PARTHNERS' :
        return  <Socios/>;
      case 'MEMBERSHIP':
        return <Membership/>;
      case 'LESSONS':
        return <Lessons/>;
      case 'ITEMS':
        return <Items/>
      case 'PURCHASES':
        return <Purchases/>;
      case 'SALES':
        return <Sales/>;
      case 'REGISTER':
        return <Registro/>;
      case 'STATICS':
        return <Statics/>;
      case 'REPORTS':
        return <Reports/>;
      case 'CONFIG':
        return <Config/>;
      default:
        return <Home/>
    }
  }
  render() {


    return (
      <div className="Dashboard">
        <div id="page-top">
          <MainNav logoutclick={this.signOut} />
          <div id="wrapper">
            <MenuDash getSelectedOption={(selectedOption)=> this.setState({showComponent:selectedOption},() => console.log(selectedOption)) }/>
              <div id="content-wrapper">
              {this.renderDashBoard()}
              <DashFooter />
            </div>
          </div>
          <ScrolToTop />
          <LogOutModal />
          <Modal idTarget='frmNuevaVenta' modalTitle='Nueva Venta' ComponentName='FrmNuevaVenta'/>
        </div>
      </div>
    );
  }
}
export default Dashboard;

这是我的注销按钮：

import React, {Component} from 'react';
import config from '../../services/config.json';

const initialState = {};
class MainNav extends Component{
  constructor(props){
    super(props);
    this.state = initialState;

  }
  render(){
    return(
      <div className='MainNav'>
      <nav className="navbar navbar-expand navbar-dark bg-dark static-top">

        <a className="navbar-brand mr-1" href="index.html">PDX YangSoft</a>

        <button className="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
          <i className="fas fa-bars"></i>
        </button>
        <form className="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
          <div className="input-group">
            <input type="text" className="form-control align-self-center" placeholder="Buscar..." aria-label="Search" aria-describedby="basic-addon2" />
            <div className="input-group-append">
            <select className="form-control align-self-center ml-1 mr-1">
              <option>Socios</option>
              <option>Productos</option>
              <option>Ventas</option>
              <option>Membrecias</option>
              <option>Clases</option>
            </select>
              <button className="btn btn-primary btn-md" type="button">
                <i className="fas fa-search"></i>
              </button>
            </div>
          </div>
        </form>
        <ul className="navbar-nav ml-auto ml-md-0">
          <li className="nav-item dropdown no-arrow">
            <a className="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i className="fas fa-user-circle fa-2x    "></i>
            </a>
            <div className="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
              <a className="dropdown-item" href="#">Opciones</a>
              <a className="dropdown-item" href="#">Registro de actividad</a>
              <div className="dropdown-divider"></div>
              <a className="dropdown-item" href="#" data-toggle="modal" onClick={this.props.logoutclick}>Salir</a>
            </div>
          </li>
          <li className="nav-item d-flex align-self-center dropdown no-arrow mx-1 text-danger text-bold">
          Huella Offline 
    </li>
        </ul>

      </nav>
      </div>
  );
}
}

export default MainNav;

在登录按钮中，我具有等于此的重定向并找到了登录名。我不明白为什么React JS会向我显示此错误。

TypeError：无法读取未定义的属性“ replace”，反应道具为空

0 个答案: