Как я могу исправить Не удается прочитать свойство 'include' из неопределенного в reactjs одностраничном приложении? - PullRequest
Новая
       12

Как я могу исправить Не удается прочитать свойство 'include' из неопределенного в reactjs одностраничном приложении?

1 голос
/ 16 апреля 2020

Я пытался проверить роль, и если роль предназначена для администратора, то отобразить роль администратора, в противном случае отобразить участника. Это показывает ошибку, которая не может прочитать свойство, я могу знать, в чем была моя ошибка и как исправить такую ​​ошибку. вот мой код: 

    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;

Это показывает, что показанная ошибка Невозможно прочитать свойство 'include' из неопределенного 

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

Спасибо !!

1 Ответ

1 голос
/ 16 апреля 2020

Вы можете использовать деструктуризацию объекта , чтобы получить roles значение свойства из user объекта, а затем установить значение по умолчанию для roles в виде пустой строки, так что если roles не определено, то Значение ролей будет установлено в значение по умолчанию '', например: 

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