为什么我无法通过Mobx获得状态的本地状态？

Question

现在我编写一个试图在Mobx Store中设置状态的代码。但是，我不知道为什么这个状态是“未定义的”。

幸运的是，我从来没有通过这个问题得到任何错误。

这是一个组件。

import React from 'react';
import {StyleSheet,View} from 'react-native';
import { Provider, observer } from 'mobx-react';
import RestaurantStore from '../Stores/RestaurantStore';
import GeneralScreenComponent 
        from'../Components/GeneralScreenComponent';

@observer
class Restaurant extends React.Component {
  render() {
   console.log(RestaurantStore.headerTitle);
  return (
   <View style={styles.container}>
     <Provider store={RestaurantStore}>
       <GeneralScreenComponent
         headerTitle={RestaurantStore.headerTitle} />
     </Provider>
   </View>
  );
 }
}

这就是商店。

import { observable } from 'mobx';

class RestaurantStore {
 @observable headerTitle = '飲食';
}


export default RestaurantStore;

Answer 1

看起来你还没有实例化你的RestaurantStore商店。通过修改RestaurantStore行更新您的export模块，如下所示：

import { observable } from 'mobx';

class RestaurantStore {
 @observable headerTitle = '飲食';
}

// Ensures that the RestaurantStore is instantiated whenever it's used in your application
export default new RestaurantStore();

Answer 2

我解决了这个问题。

我刚刚改变了

export default RestaurantStore;

至

export default new RestaurantStore();