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

Question

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

我一直在学习这个不错的教程：https://hackernoon.com/how-to-build-your-first-app-with-mobx-and-react-aea54fbb3265 (the complete code of the tutorial is located here: 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 将是商店中的数字，而这两个方法必须被装饰为动作，因为它们正在改变观察到的变量。

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

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

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

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

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

谢谢

Answer 1

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

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

Action decorator in Mobx does not function with strict-mode

mobx

mobx-react