App（…）：路由用戶的不同角色時，渲染未返回任何內容

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方法

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>
  );
}