MobX React Native引发无法读取未定义的属性

时间:2018-09-10 08:57:40

标签: react-native mobx mobx-react mobx-persist

我正在尝试将一个mobX商店传递给另一家商店,以下是我的商店代码:

存储类别1:

export default class APIKeyStore
{
    @persist @observable apiKey = '****';
}

商店2类:

export default class ServiceCalls
{
    @persist @observable apiKeysStore;

    constructor(apiStore)
    {
        this.apiKeysStore = apiStore; 
        console.log('constructor', this.apiKeysStore.apiKey);
    }

    @action async initializeApp()
    {
        console.log('initializeApp', this.apiKeyStore.apiKey);
    }
}

index.js:

import APIKeyStore from './models/APIKeyStore';
import ServiceCalls from './models/ServiceCalls';

const serviceCalls = new ServiceCalls(new APIKeyStore())

const stores = {
  serviceCalls: serviceCalls
}

export default
{
  ...stores
};

我要调用存储2的initializeApp()方法的组件文件:

@inject('serviceCalls')
@observer
class ZeroStepScreen extends Component
{
  async componentWillMount()
  {
    try
    {
      console.log('componentWillMount', this.props.serviceCalls.apiKeysStore.apiKey);
      await this.props.serviceCalls.initializeApp();
    }
    catch(e)
    {
      console.log(e);
    }
  }
}

在上述类中,我有三个console.log(..)声明-在其中声明第二个商店的constructor和组件的componentWillMount()方法的正确结果。

调用同一第二个存储类的initializeApp()方法时,this.apiKeysStore.apiKey总是抛出无法读取undefined属性的消息。

第二类的构造函数-console.log(this.apiKeysStore.apiKey)-确定

ZeroStepScreen-console.log(this.props.serviceCalls.apiKeysStore.apiKey)-确定

第二类'initializeApp()-console.log(this.apiKeysStore.apiKey)-错误

我无法理解我做错了什么,因为当构造函数报告正确而组件类报告正确时,第二存储类在访问this.apiKeysStore.apiKey时变得未定义。

1 个答案:

答案 0 :(得分:0)

我不太确定基本原理(以这种方式进行事情),但最终遵循以下方式对我有用:

@action async initializeApp()
{
   console.log(this.getAPIKeyStore()).apiKey);
}

getAPIKeyStore()
{
  return this.apiKeysStore;
}

可能使用async无法使我直接访问类级别的观察器。