MobX中的Ajax调用：MobX观察器：存储不可用！确保它由某些提供程序提供

Question

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

当前，我的各个组件从父/祖父母进行的Ajax调用中向下传播数据，效果很好。

现在，我希望对此进行更改，以免由于并行孙/子孙的复杂性和依赖性的改变而不再在树结构中工作。

假设我在axios.get React类的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的render方法中，我对<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'，则提供程序看起来像已正确配置了

这是我要更改商店本身的方式：

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>parentData</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