我如何解决无法读取reactjs单页面应用程序中未定义的属性'includes'？

Question

我正在尝试检查角色，如果该角色是管理员的，则显示角色admin，否则显示成员。它显示了一个无法读取属性的错误，我可能知道什么是我的错误以及如何解决该错误。这是我的代码：

    import React, { Component } from "react";
    import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
    import "bootstrap/dist/css/bootstrap.min.css";
    import "./App.css";

    import AuthService from "./services/auth.service";

    import Login from "./components/login.component";
    import Register from "./components/register.component";
    import Home from "./components/home.component";
    import Profile from "./components/profile.component";
    import BoardUser from "./components/board-user.component";
    import BoardModerator from "./components/board-moderator.component";
    import BoardAdmin from "./components/board-admin.component";

    class App extends Component {
      constructor(props) {
        super(props);
        this.logOut = this.logOut.bind(this);

        this.state = {
          showModeratorBoard: false,
          showAdminBoard: false,
          currentUser: undefined
        };
      }

      componentDidMount() {
        const user = AuthService.getCurrentUser();
        if (user) {
          this.setState({
            currentUser: AuthService.getCurrentUser(),
             showModeratorBoard: user.roles.includes("admin"),
             showAdminBoard: user.roles.includes("member")

          });
        }
      }

      logOut() {
        AuthService.logout();
      }

      render() {
        const { currentUser, showModeratorBoard, showAdminBoard } = this.state;

        return (
          <Router>
            <div>
              <nav className="navbar navbar-expand navbar-dark bg-dark">
                <Link to={"/"} className="navbar-brand">
                  bezKoder
                </Link>
                <div className="navbar-nav mr-auto">
                  <li className="nav-item">
                    <Link to={"/home"} className="nav-link">
                      Home
                    </Link>
                  </li>

                   {showModeratorBoard && (
                    <li className="nav-item">
                      <Link to={"/mod"} className="nav-link">
                        Moderator Board
                      </Link>
                    </li>
                  )}

                  {showAdminBoard && (
                    <li className="nav-item">
                      <Link to={"/admin"} className="nav-link">
                        Admin Board
                      </Link>
                    </li>
                  )} 

                  {currentUser && (
                    <li className="nav-item">
                      <Link to={"/user"} className="nav-link">
                        User
                      </Link>
                    </li>
                  )}
                </div>

                {currentUser ? (
                  <div className="navbar-nav ml-auto">
                    <li className="nav-item">
                      <Link to={"/profile"} className="nav-link">
                        {currentUser.username}
                      </Link>
                    </li>
                    <li className="nav-item">
                      <a href="/login" className="nav-link" onClick={this.logOut}>
                        LogOut
                      </a>
                    </li>
                  </div>
                ) : (
                  <div className="navbar-nav ml-auto">
                    <li className="nav-item">
                      <Link to={"/login"} className="nav-link">
                        Login
                      </Link>
                    </li>

                    <li className="nav-item">
                      <Link to={"/register"} className="nav-link">
                        Sign Up
                      </Link>
                    </li>
                  </div>
                )}
              </nav>

              <div className="container mt-3">
                <Switch>
                  <Route exact path={["/", "/home"]} component={Home} />
                  <Route exact path="/login" component={Login} />
                  <Route exact path="/register" component={Register} />
                  <Route exact path="/profile" component={Profile} />
                  <Route path="/user" component={BoardUser} />
                  <Route path="/mod" component={BoardModerator} />
                  <Route path="/admin" component={BoardAdmin} />
                </Switch>
              </div>
            </div>
          </Router>
        );
      }
    }

    export default App;

它显示的错误是无法读取未定义的属性'includes'>]

if (user) {
  31 |   this.setState({
  32 |     currentUser: AuthService.getCurrentUser(),
> 33 |      showModeratorBoard: user.roles.includes("admin"),
     | ^  34 |      showAdminBoard: user.roles.includes("member")
  35 |      
  36 |   });
谢谢！

我正在尝试检查角色，如果该角色是管理员的，则显示角色admin，否则显示成员。它显示了一个无法读取属性的错误，我可能知道我的错误以及如何...

Answer 1

您可以使用object destructuring从roles对象获取user属性值，然后将roles的默认值设置为空字符串，因此，如果roles未定义，则角色值将设置为''的默认值，例如：