Question

我刚刚开始学习在项目中实现Mobx的知识，但遇到了一个大问题：我似乎不明白行动的工作原理。

我一直在关注这个不错的教程：https://hackernoon.com/how-to-build-your-first-app-with-mobx-and-react-aea54fbb3265（教程的完整代码位于这里：https://codesandbox.io/s/2z2r43k9vj?from-embed），并且运行顺利。我已经尝试在我这边做一个小型的React App，尝试做与上述教程相同的操作，但是失败了。我确信我看不到一些小细节（因为该应用程序非常简单），因此，我希望获得一些帮助。

我也曾尝试寻找与我类似的案例，但是我没有通过快速搜索找到任何东西（这使我认为问题甚至不重要了……）

我的代码是这样：

import React, { Component } from 'react';
import { decorate, observable, action, configure } from 'mobx';
import { observer } from 'mobx-react';

configure({ enforceActions: 'always' });

class Store {
    my_number = 1;

    addNumber() {
        this.my_number += 1;
    }

    removeNumber() {
        this.my_number -= 1;
    }
}

decorate(Store, {
    my_number: observable,
    addNumber: action,
    removeNumber: action
})

const my_store = new Store();

const Button = (props) => {
    if (props.store.my_number === 1) {
        return (
            <div>
                <button onClick={props.store.addNumber}>+</button>
            </div>
        )
    } else if (props.store.my_number === 4) {
        return (
            <div>
                <button onClick={props.store.removeNumber}>-</button>
            </div>
        )
    } else {
        return (
            <div>
                <button onClick={props.store.addNumber}>+</button>
                <button onClick={props.store.removeNumber}>-</button>
            </div>
        )
    }
}

const ObserverButton = observer(Button);

const DisplayNumber = (props) => {
    return (
        <h1>My number is: {props.store.my_number}</h1>
    )
}

const ObserverDisplayNumber = observer(DisplayNumber);

export class SimpleMobxStore extends Component {
    render() {
        return (
            <div>
                <ObserverButton store={my_store} />
                <ObserverDisplayNumber store={my_store} />
            </div>
        )
    }
}

我对开发它的想法一直是（如果不好的话，我也很感谢有关如何改善我的思想流的建议）：

我想要屏幕上显示一个介于1到4之间的数字的文本。在此文本上方，我想要一个按钮，该按钮允许我通过每次添加或减去一个单位来增加或减少此数字。我希望将此变量（当前数字）存储在单独的商店中。该商店将包括：

我的电话号码
增加数量的方法
减少数量的方法

此外，我将创建两个组件：一个按钮组件，用于根据当前数字呈现我的按钮；以及一个显示组件。

我可观察的将是商店中的数字，而这两种方法将必须修饰为动作，因为它们正在更改观察到的变量。

我的按钮和显示组件将是观察者，因为一旦数字更改，它们必须重新呈现。

通过这种简单的推理和代码，我期望它能正常工作，但是我却得到了：

错误：[mobx]由于启用了严格模式，因此不允许在操作之外更改观察到的可观察值。如果需要进行此更改，请将代码包装在action中。试图修改：Store@4.my_number

当我定义const my_store = new Store();时，日志似乎指向该日志，但这是在本教程中完成的，并且可以在其中使用。

关于这在哪里失败以及为什么的任何想法？

谢谢

Answer 1

我认为您对商店的操作直接来自render（）。标签要精确。尝试在渲染器外部使用一种方法，然后尝试从那里更改存储状态。

Mobx中的动作装饰器不适用于严格模式

1 个答案: