我正在使用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-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;
任何帮助,将不胜感激,
谢谢
If else
不适用于jsx,请尝试以下
vendorStore.loginState ? return (
<div className="Dashboard">
<h1>Dashboard</h1>
<Main />
</div>
): return <Redirect to='/signin' />
这里几乎没有潜在的问题。
首先,您的嵌套ifs可能会导致问题,请尝试更改为:
if (vendorStore.loginState) {
return (
<div className="Dashboard">
<h1>Dashboard</h1>
<Main />
</div>
)
} else {
return <Redirect to='/signin' />
}
其次,如果你希望React回应loginState
的变化那么你需要使用能够提供loginState
作为React的支柱的东西。因为香草反应只会响应状态/道具的变化。尝试整合https://github.com/mobxjs/mobx-react