MobX 中的 Ajax 调用: MobX 观察者:存储不可用！确保它由某个提供商提供

Question

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

目前，我的各个组件从父级/祖父级进行的 Ajax 调用中向下传播数据，这工作正常。

现在我希望改变这一点，这样我就不再在树结构中工作了，因为平行孙子/子代的复杂性和依赖性的变化。

假设我在<Parent1/>React类componentDidMount做一个axios.get。然后如何使用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'类名，则提供程序看起来配置正确

以下是我更改商店本身的方法：

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