在我的 React 应用程序中，mobx @action 没有触发 - mobx ， mobx-react-lite答案

【问题标题】：In my React application, mobx @action is not firing - mobx , mobx-react-lite在我的 React 应用程序中，mobx @action 没有触发 - mobx ， mobx-react-lite
【发布时间】：2021-01-29 03:32:57
【问题描述】：

我第一次使用mobx 和mobx-react-lite，我可以看到@action 没有触发任何事件。

请找Code SandBox url here

我的意图是当我单击按钮时，名称 CHAN 应更改为 XIAN。但它没有发生。你能告诉我我哪里做错了吗？提前致谢。

【问题讨论】：

标签： reactjs mobx mobx-react mobx-react-lite

【解决方案1】：

除了@Christiaan 回答，您还可以使用makeAutoObservable 并完全放弃装饰器！

import { observable, action, makeAutoObservable } from "mobx";

export class myStore {
  name: string = "CHAN";

  constructor() {
    makeAutoObservable(this)
  }

  setName(newName: string) {
    this.name = newName;
  }
}

【讨论】：

我会记下来的。非常感谢。
我还有一个基本问题。将观察者包裹在 app.tsx 中的代码一次是否足以让整个应用程序使其反应？
不，您需要包装每个使用任何可观察或计算值的组件。老实说，把所有东西都包起来更容易。

【解决方案2】：

您在 myStore 构造函数中缺少 makeObservable。

Codesandbox

Documentation

import { observable, action, makeObservable } from "mobx";

export class myStore {
  @observable name: string = "CHAN";

  constructor() {
    makeObservable(this)
  }

  @action
  setName(newName: string) {
    this.name = newName;
  }
}

【讨论】：

前几分钟我无法接受答案。我现在已经接受了。非常感谢您的宝贵时间。
我还有一个基本问题。将observer 包裹在app.tsx 中的代码周围是否足以让整个应用程序使其反应？
不，您应该包装每个应该与observer 反应的组件。这是因为observer 只订阅了它自己的渲染函数中的消费属性。例如。如果您将完整的商店传递给子组件，它不会重新渲染，因为商店本身不会改变。