Error: Cannot read property 'status' of undefined", logout function REACTJS

Question

我有一个 php 代码 (logout.php) 会破坏用户会话。当用户单击 NavBar 中的 'log out'（在代码末尾）时，我想调用我的 handleLogOut 函数。如果状态响应为 200，则会话关闭，用户被重定向到我的登录页面。我有错误："navBar.js:24 Uncaught (in promise) TypeError: Cannot read property 'status' of undefined"。请问我可以在我的代码中添加或更改什么？

navBar.js:

import React, { Component } from "react";

    import { MDBNavbar,  MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBDropdown,
    MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem,  } from "mdbreact";
    import axios from "axios";
    import { Redirect} from 'react-router';


class NavbarPage extends Component {
state = {
  isOpen: false,
  logOut: false,
};

handleLogOut () {
  axios.get("http://localhost:8888/login/logout.php")

  .then(function(response){
    console.log(response);
    this.setState({logOut: true});
  }.bind(this))

  .catch((error) => {
    if(error.response.status === 403){
      console.log(error);
    }
  });
}

toggleCollapse = () => {
  this.setState({ isOpen: !this.state.isOpen });
}

render() {
  const bgRed = {backgroundColor: 'rgb(83, 4, 4)'};
  const{logOut} = this.state;


  if(logOut){
    return <Redirect to="/login"/>;
  }

  return (
      <MDBNavbar style={bgRed} dark expand="md" scrolling fixed="top">

        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
          <MDBNavbarNav left>
          <MDBNavItem active  className="M">
              <MDBNavLink to="/acceuil"><strong>MyBibli</strong></MDBNavLink>
            </MDBNavItem>
            <MDBNavItem active>
              <MDBNavLink to="/mesLivres">Mes livres</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="/ajoutLivre">Ajouter un livre</MDBNavLink>
            </MDBNavItem>
            </MDBNavbarNav>

            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <div className="d-none d-md-inline">My account</div>
                </MDBDropdownToggle>
                <MDBDropdownMenu className="dropdown-default">
                  <MDBDropdownItem href="#!">Gérer mon compte</MDBDropdownItem>
                  <MDBDropdownItem href="#!" onClick = {this.handleLogOut} >Log Out</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>


          </MDBNavbarNav>
        </MDBCollapse>
      </MDBNavbar>
    );
  }
}

export default NavbarPage;

logout.php:

<?php   
        session_start();
        if(isset($_SESSION['User'])){
        session_destroy();
        http_response_code(200);
        }
        else {
        http_response_code(403);
        }
?>

Answer 1

您需要确保错误对象具有名为 "response"

的属性

.catch((error) => {
  if(error.response && error.response.status === 403){
    console.log(error);
  }
});

上面的代码片段很可能无法完全解决您的问题，但希望能让您更接近解决方案。

Error: Cannot read property 'status' of undefined", logout function REACTJS

Error: Cannot read property 'status' of undefined", logout function REACTJS

javascript

php

reactjs

axios

logout