MobX中的Ajax调用:MobX观察者:商店不可用!确保它是由某个提供商提供的

Question

我正在从具有树结构的传统React应用程序迁移到使用MobX的状态管理结构.

目前,我的各个组件传播来自父/祖父母进行的Ajax调用的数据,这很好.

现在我希望改变这一点,因为我不再在树形结构中工作,因为并行孙子/孩子的复杂性和依赖性的变化.

说我做一个axios.get在componentDidMount一个的<Parent1/>阵营类.我如何使用MobX？访问数据？

到目前为止我尝试过的:

创建一个store.jsx看起来如此:

import { observable } from 'mobx';
const axios = require('axios');

class Store {
    @observable parentdata;
    loadParent = () => {
        let that = this;
        axios.get("/api/parent").then(function(response){
            that.parentdata = response.parentdata;
        }).catch(function(error){
         // Error handling
        })
    };
}

export default Store;

我ReactDOM的呈现container.jsx包含所有父母,也意味着<Parent1/>.在container.jsx我们做以下事项:

import { Provider } from 'mobx-react';

import Store from './store/store.jsx';
let store = new Store();

和

ReactDOM.render(
    <Provider store={store}>
        <Main />
    </Provider>,
    document.getElementById('content')
);

.. 到底.

在container.jsx我不做任何事情的渲染方法中<Parent1/>- 它只是将组件渲染为正常(这就是想法,对吧？)

在parent1.jsx,我删除前面的axios.get并添加这些:

import { inject, observer } from 'mobx-react';


@inject('store') @observer
export default class Parent1 extends React.Component {
// ..... 

 componentDidMount () {
        this.props.store.loadParent();

之后,提供错误: MobX observer: Store 'parentdata' is not available! Make sure it is provided by some Provider

我在哪里绑定数据出错了？

编辑:正在删除@inject并且只有@observer结果:TypeError: Cannot read property 'loadParent' of undefined

Answer 1

有几点需要解决：

假设您为parentData商店命名'store'，而不是'Store'像类名那样，则 Provider 看起来配置正确

这是我改变商店本身的方法：

import { observable } from 'mobx';
const axios = require('axios');

class Store {
    @observable parentdata;
    loadParent = () => {
        // There's no need to clone this if you're using arrow functions
        axios.get("/api/parent").then((response) => {
            this.parentdata = response.parentdata;
        }).catch(function(error){
         // Error handling
        })
    };
}

export default Store;

在组件中，我可能会这样做：

import { inject, observer } from 'mobx-react';


@inject('store') @observer
export default class Parent1 extends React.Component {
  // ... //
  componentDidMount () {
      this.props.store.loadParent();
  }

  render() {
    if (!this.props.store.parentData) { return (<div>Loading...</div>) }

    const { parentData } = this.props.store
    return (<pre>{JSON.stringify(parentData, null, 4)}</pre>)

  }

}

我怀疑您的商店区分大小写并且名称错误。

调试的一个巧妙技巧可能是console.log重要的变量或将它们附加到窗口对象来测试。

例如：

class Parent1 {

  componentDidMount() {
    window.Parent1 = this
    window.Parent1Props = this.props
    window.Store = this.props.store // or `this.props.Store` check case sensitivity!
  }


  // Open browser console and try to access your now global variables