React native 使用mobx抛出错误进行本机反应

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 }

我用mobx实现react native,得到了这个错误

[mobx]遇到未捕获的异常,该异常是由反应或观察者组件在“反应”中引发的[Reaction@1]错误:[serializr]未能找到未定义的默认架构

根分量

    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()