javascript - React + MobX，用户认证，渲染错误

Question

我正在使用 MobX 进行状态管理，我还在 localStorage 中保存了一些信息。

这是我的 mobxStore 的样子:

const hydrate = create({
    storage: localStorage, // or AsyncStorage in react-native; default: localStorage
    jsonify: false  // if you use AsyncStorage, here shoud be true; default: true
})

export class VendorStore {
    @observable vendor = {};
    @persist @observable.ref loginState = localStorage.getItem('loginState');
}

var vendorStore = new VendorStore()
hydrate('vendorStore', vendorStore).then(() => console.log('vendorStore has been hydrated'))

export default vendorStore

这个想法是通过 loginState 控制页面的重定向

这就是我的 Dashboard.js 的样子:

if (vendorStore.loginState === false) { return <Redirect to='/signin' /> }
    if (vendorStore.loginState === true) {
        return (
            <div className="Dashboard">
                <h1>Dashboard</h1>
                <Main />
            </div>
        )

它要么没有按预期工作，当 loginState 为 false 时没有重定向，要么像下面这样抛出我的 react 渲染错误:

react-dom.development.js:57 Uncaught Invariant Violation: Dashboard(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null;

如有任何帮助，我们将不胜感激

谢谢

Answer 1

如果 else 在 jsx 上不起作用，请尝试以下

vendorStore.loginState ?  return (
            <div className="Dashboard">
                <h1>Dashboard</h1>
                <Main />
            </div>
        ): return <Redirect to='/signin' />