Mobx 异步示例在操作后不呈现结果答案

【问题标题】：Mobx async example does not render result after actionMobx 异步示例在操作后不呈现结果
【发布时间】：2021-08-31 18:26:45
【问题描述】：

你可以通过codesandbox查看问题

我正在尝试获取一些数据并填充一些变量并在 React 中呈现值，基本上遵循文档 await/async + runInAction 示例：https://mobx.js.org/actions.html#asynchronous-actions

但是，当获取数据时，React 实际上并没有重新渲染。但是，如果您在那里编辑文本（即将 hi 更改为 his 或其他任何内容，那么您会看到正确的值出现。

我在获取数据时到底做错了什么？为什么在获取某些数据后为 observable 值分配了一个值时，它没有被正确地重新渲染？

【问题讨论】：

【解决方案1】：

这其实是 Mobx 的局限之一。

来自docs：

make(Auto)Observable 仅支持已定义的属性。确保您的编译器配置正确，或者作为解决方法，在使用 make(Auto)Observable 之前为所有属性分配一个值。如果没有正确的配置，声明但未初始化的字段（如在 class X { y; } 中）将不会被正确拾取。

只需初始化标题this.title=undefined 即可。

【讨论】：

【解决方案2】：

这是一个简单的错误。 MobX 无法将 title 的数据与不存在的数据进行比较。东西应该有某种默认值，甚至是null。因此在构造函数中，您需要定义 title 默认值，例如

constructor() {
    this.title = [],
    makeAutoObservable(this);
}

或者，如果你愿意，甚至是null

constructor() {
    this.title = null,
    makeAutoObservable(this);
}

基本上，每当您在商店中创建一些可观察变量时，您都需要在makeAutoObservable 上方的构造函数中定义其默认值。

在这里，你的一个分叉项目只需更改这 1 行以使其工作https://codesandbox.io/s/suspicious-noether-fnhjw

【讨论】：