Question

我使用此功能来检查已登录用户的角色。

export function getUserRole() {
  return (
    localStorage.getItem('token') &&
    jwtDecode(localStorage.getItem('token')).role
  )
}

在我的index.js中，我有$（this）

class App extends Component {
  constructor(props) {
    super(props)

    this.role = getUserRole()
  }

  render() {
    if (this.role === 'member') {
      return (
        <Provider store={userStore}>
          <BrowserRouter>
            <div className="App">
              <Switch>
                <Redirect exact from="/" to="/dashboard" />
                <Auth path="/dashboard" component={Dashboard} />

                <Route path="/login" component={Login} />
              </Switch>
            </div>
          </BrowserRouter>
        </Provider>
      )
    }
  }
}

但是我遇到了这个错误？

App（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

我不确定是否应该将getUserRole函数放在构造函数中。

Answer 1

错误确切地说明了它的字面意思。由于您添加了if (this.role === 'member')，因此如果不是return的成员就不会存在return，并且render方法中必须有rails server

Answer 2

您还应该处理未经身份验证的情况。因此，在这种情况下，应更新render方法以返回以下内容：

render() {
  if (this.role !== 'member') {
    return (<div>Unauthenticated</div>);
  }

  return (
    <Provider store={userStore}>
      <BrowserRouter>
        <div className='App'>
          <Switch>
            <Redirect exact from='/' to='/dashboard' />
            <Auth path='/dashboard' component={Dashboard} />

            <Route path='/login' component={Login} />
          </Switch>
        </div>
      </BrowserRouter>
    </Provider>
  );
}

App（...）：路由用户的不同角色时，渲染未返回任何内容

2 个答案: