Javascript 如何修复无法读取属性'；包括'；在reactjs单页应用程序中未定义的？

我试图检查角色，如果角色是admin，则显示角色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;

谢谢

您可以使用从

用户

对象获取

角色

属性值，然后将

角色

的默认值设置为空字符串，这样，如果

角色

未定义，则角色值将设置为

''

的默认值，如：

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

---

AuthService.getCurrentUser（）方法的返回值是多少？@MartinHorváth返回值是return
JSON.parse（localStorage.getItem（'user'）Thank you@palash显示错误，因为角色未定义。我可以知道如何传递角色，以便我可以显示管理员的链接（如果登录用户为AdminBoard），如果签名用户为“成员”，则显示版主卡片链接（如果登录用户为“仅用户”），并且仅显示用户（如果登录用户为“仅用户”）。我正在通过jwt令牌从后端使用get/post角色。你想将角色传递给什么？@palasH我想将角色传递给
user
，这样我就可以检查用户的角色是admin还是mod，还是唯一的user。哦，好的，但这似乎是另一个问题。如果这篇文章中提到的“无法读取未定义属性”的“包含”的问题已得到解决，请为此创建一篇新文章，并将此答案标记为。@palasH我已创建一篇新文章，这是问题的链接。你能帮我解决这个问题吗。
if (user) {
  const { roles = '' } = user;
  this.setState({
    currentUser: AuthService.getCurrentUser(),
    showModeratorBoard: roles.includes("admin"),
    showAdminBoard: roles.includes("member")    
  });
}