javascript - React + MobX,用户身份验证,渲染错误
问题描述
我正在使用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>
)
它要么没有按预期工作,要么没有重定向 when loginState
is 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' />
推荐阅读
- ios - 即使在表格视图启用或不启用搜索后,我如何处理清单按钮
- node.js - 发布项目时出现 package-lock.json 问题
- java - Junit 5 标签不适用于 Gradle 6.5.1
- sql-server - 如何使用 SSIS 将 sql server 查询结果导出到 .csv 文件和数据应该是导出文件中的双引号
- google-chrome - google chrome - log v8 regexp execution
- python - How to embed my python chatbot to a website
- c# - C# HttpClient.PostAsync doesn't return or throw an error
- reactjs - TypeError:无法读取未定义 Reactjs 的属性“长度”
- java - Arabic and English combination recrod retrieval from oracle java
- asp.net - 如何从每个输入文件中获取提交的文件数