Mobx中的Action装饰器不能使用strict-mode

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

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

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

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

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

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

错误：[mobx]由于启用了strict-mode，因此不允许在操作之外更改观察到的可观察值。如果要进行此更改，请将代码包装在action中。试图修改：[email protected]_number

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

知道这个失败的原因以及为什么？

谢谢

Answer 1

我认为你对商店的行动直接来自render（）。标签要准确。尝试在渲染之外使用方法并尝试从那里更改存储状态。