React native 使用mobx抛出错误进行本机反应
我用mobx实现react native,得到了这个错误 [mobx]遇到未捕获的异常,该异常是由反应或观察者组件在“反应”中引发的[Reaction@1]错误:[serializr]未能找到未定义的默认架构 根分量React native 使用mobx抛出错误进行本机反应,react-native,mobx,mobx-react,mobx-persist,React Native,Mobx,Mobx React,Mobx Persist,我用mobx实现react native,得到了这个错误 [mobx]遇到未捕获的异常,该异常是由反应或观察者组件在“反应”中引发的[Reaction@1]错误:[serializr]未能找到未定义的默认架构 根分量 import React, { Component } from 'react'; import { View, AsyncStorage, Text, } from 'react-native'; import { StackNavigator }
import React, { Component } from 'react';
import {
View,
AsyncStorage,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { observer, Provider } from 'mobx-react/native'
import { create } from 'mobx-persist'
import { AppStore,UserStore } from '../stores'
const stores = { UserStore, AppStore };
import {
Walkthrough
} from '../screens'
const hydrate = create({
storage: AsyncStorage
})
let Main = null;
hydrate('appStore', AppStore).then((a) => {
console.log(a);
AppStore.done();
}
)
hydrate('userStore',UserStore).then((a)=>{
console.log(a)
Main = StackNavigator(
{
Walkthrough: { screen: Walkthrough },
}, {
headerMode: 'none',
lazy: true,
initialRouteName: 'Walkthrough',
}
)
})
@observer
class Root extends Component {
constructor(props){
super(props);
this.state = {
}
}
render(){
// const ready = UserStore.storeHydrated && AppStore.storeHydrated;
const ready = false;
return (
<View>
{!ready &&
<View><Text>Splash screen component</Text></View>}
</View>
)
}
}
export default Root;
用户商店
import { observable, action, computed } from 'mobx'
import { persist } from 'mobx-persist'
class UserStore {
@persist @observable first_name;
@persist @observable last_name;
@persist @observable email;
@persist @observable tasks;
@persist @observable storeHydrated = false;
@persist @observable alreadyRegister = false;
constructor(){
this.setUser = this.setUser.bind(this);
console.log("userStore")
}
@action setUser(data){
this.first_name = data.first_name
this.last_name = data.last_name;
this.email = data.email;
this.tasks = data.tasks;
}
@action done(){
//this.storeHydrated = true;
// if(this.alreadyRegister){
// this.getUserDetails();
// }
}
@action setIsFirstTimeInApp(firstTIme){
this.firstTimeInApp = firstTIme;
}
}
const user = new UserStore();
export default user;
我已经尝试过删除该应用程序并再次运行,但仍然没有任何更改,它会抛出相同的错误。问题是
@persist @observable storeHydrated = false;
UserStore内部不应持久化,因为它是应用程序每次加载时重新启动的值
因为它是持久的,所以第一次运行后,true的值保存在存储器中
因此,请使用:
@observable storeHydrated = false;
然后,在定义StackNavigator Main之前,它将被渲染
额外提示:
使用@persist@observable varName
时,
您应该始终初始化一个值,即使是null,因为不正确支持“undefined”的序列化,所以它应该如下所示:
@persist@observable varName=null
(或任何适合空字符串、0、true、false等的内容)
对于特别计划,它应该是:
@persist('list') @observable varName = []
@persist('object') @observable varName = null
@persist('map') @observable varName = new Map()
同样的错误,但是这个解决方案在我的案例中不起作用。
@persist('list') @observable varName = []
@persist('object') @observable varName = null
@persist('map') @observable varName = new Map()