Mobx 中的动作装饰器在严格模式下不起作用

Question

我刚开始学习 Mobx 并在我的项目中实现它，我遇到了一个大问题：我似乎不明白动作是如何工作的。

我一直在关注这个不错的教程：https://hackernoon.com/how-to-build-your-first-app-with-mobx-and-react-aea54fbb3265（教程的完整代码位于此处：https://codesandbox.io/s/2z2r43k9vj?from-embed），并且运行顺畅。我试图在我身边做一个小的 React 应用程序，尝试做与教程中提到的相同的事情，但它失败了。我确信有一些我没有看到的小细节（因为该应用程序非常简单），所以我将不胜感激。

我也尝试过寻找与我类似的案例，但是通过快速搜索我没有找到任何东西（这让我更加认为问题是微不足道的......）

我的代码是这样的：

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 之间的数字的文本。在此文本上方我想要一个按钮，允许我通过每次添加或减去一个单位来增加或减少这个数字。我希望将此变量（当前数字）存储在单独的存储中。该商店将包括：

• 我的号码
• 一种增加数量的方法
• 一种减少数字的方法

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

我的 observable 将是 store 中的数字，而这两个方法必须被装饰为操作，因为它们正在更改观察到的变量。

我的按钮和显示组件将成为观察者，因为一旦数字发生变化，它们就必须重新渲染。

通过这个简单的推理和代码，我期待它能够运行，但我得到了：

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

当我定义const my_store = new Store(); 时，日志似乎指向，但这是在教程中完成的，它在那里工作。

知道失败的地方和原因吗？

谢谢

Answer 1

我认为您对商店的操作直接来自 render()。准确地说是标签。尝试在渲染之外使用一个方法并尝试从那里更改存储状态。