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

如何解决Mobx 异步示例在操作后不呈现结果

您可以通过代码和框查看问题

代码沙盒：https://codesandbox.io/s/great-frog-m2s7h

上下文

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

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

问题

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

解决方法

这其实是 Mobx 的局限之一。

来自docs：

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

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

,

这是一个简单的错误。 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