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的渲染方法中，我不对<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

需要解决的几件事：

假设您将2商店命名为parentData，而不是像类名那样命名为'store'，则Provider似乎配置正确

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

'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

MobX中的Ajax调用：MobX观察者：商店不可用！确保它由某些提供商

1 个答案: