javascript – MobX React Native：注入商店的方式

我正在尝试使用MobX进行新项目.
我是在2017年5月开始的,一切都运作良好.我不得不停下来,现在我继续开发它.我不得不做一个npm安装来管理它的工作,但现在,我有一些商店的问题…
我依靠本教程的结构：https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

这是我的结构：

Main index.js

import { Provider } from 'mobx-react';
import Stack from './router';
import stores from './stores';

export default class App extends Component {

      render() {
        return (
          <Provider {...stores}>
            <Stack />
          </Provider>
        );
      }
    }

Index.js of my stores in ./stores/index.js

import ChatStore from './ChatStore';
import UserStore from './UserStore';

export default {
  UserStore: new UserStore(),
  ChatStore: new ChatStore(),
};

./stores/UserStore.js (important parts)

import { observer, inject } from 'mobx-react';
import {autobind} from 'core-decorators';
...
@inject(['ChatStore'])
@observer
@autobind
export default class UserStore {

  @observable isAuthenticated = false;
  @observable isConnecting = false;
  @observable user = null;
  @observable messages = [];
  @observable hasMoreMessages = false;
  @observable skip = 0;
...
login() {
    const payload = {
      strategy: 'local',
      material_id: DeviceInfo.getManufacturer(),
      password: DeviceInfo.getManufacturer()
    };
    return this.authenticate(payload);
  }
...

现在,对于组件部分：

Router.js

import { StackNavigator } from 'react-navigation';

import Home from './containers/Home';

const stackNavigatorConfig = {
  initialRouteName: 'Home',
};

export default StackNavigator({
  Home: {
    screen: Home,
  },
}, stackNavigatorConfig);

./containers/Home.js

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';

@inject('UserStore')
@observer
export default class Home extends Component {
  props: Props;
...
render() {
    this.props.UserStore.login().catch(error => {
       console.log('LOGIN', 'ERROR', JSON.stringify(error), error.message);
    });

   return {
    ...
   }
}

然后,我收到一个错误：

所以,我总结一下：

>我使用< Provider>从MobX,我的所有商店到我的应用程序
>然后,我使用@inject获取我想要的组件
>我使用它作为道具,使用this.props.UserStore …
但它不起作用.我依靠本教程的结构：https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

也许2017年5月到今天之间有一个更新,这使得事情变得不同……它在2017年5月运作良好.
我认为这是一个假的错误,但我找不到哪一个……

解决方法:

除了UserStore类上的装饰器外,一切看起来都很好：@inject([‘ChatStore’])@ observer @autobind. @inject([‘ChatStore’])@ observer用于React组件,@ autobind可能仍然按预期工作.

如果删除它们应该可以工作.

标签：javascript,react-native,mobx,mobx-react,feathersjs
来源： https://codeday.me/bug/20190627/1306482.html