Question

globalStore.js

import {observable} from 'mobx';

export default class globalStore {
    @observable loggedIn = false;
}

其次是主App.js：

import LoginForm from './src/components/LoginForm';
import { observer } from 'mobx-react';
import globalStore from './src/store/globalStore';

呈现loginForm：

      return (
            <LoginForm store={globalStore} />
      );

在LoginForm中，我希望访问＆＃34; loggedIn＆＃34;可观察到：

观察者

class LoginForm extends Component { / ... 

render() {
        console.log(this.props.store.loggedIn);

结果：undefined

期望的结果：false

为什么这不起作用？

我是否需要包含LoginForm组件的提供商？怎么样？

将我的整个包含在商店的App.js中并不能正常工作

Answer 1

我无法看到您的全局商店类的实例

尝试

import {observable} from 'mobx';

class globalStore {
    @observable loggedIn = false;
}
const global_store=new globalStore(); // as a singleton class
export default global_store;

然后您的登录表单如下

 return (
            <LoginForm store={global_store} />
      );

或者您也可以在登录表单上实例化

Answer 2

我认为从我的观点来看，我做的工作实施方式不同：

首先，您需要从GlobalStore创建新商店。我已经这样做了：

class GlobalStore {
  @observable loggedin = false;
  ...
}

const store = new GlobalStore();
export default store;

然后你应该使用provider：

import GlobalStore from './path/to/stores/GlobalStore';

<Provider
  globalStore={GlobalStore}
>
  <AppRelatedContainers />
</Provider>

最后，您应该以登录形式注入您的商店：

@inject('globalStore')
class LoginForm extends Component {
...

  render() {
    console.log(this.props.globalStore.loggedIn);
    ...
  }

通过这些步骤，您应该得到一个可行的解决方案。我知道当你最初使用MobX时，MobX会很痛苦。但随后它变得轻松起来，你很高兴：）。

React-native MobX @observable始终未定义

2 个答案: