为什么 Mobx 6 的行为在我的两个环境中不同？

Question

我正在将我们的 TypeScript 代码库中的商店迁移到 Mobx 6。此商店由 React Web 组件和 Expo React Native 组件共享。

看起来像这样：

class MyStore {
  value: string;

  constructor() {
    makeObservable(this, {value: observable});
  }
}

这适用于我的 React 网络组件。

但是，当我在我的 Expo React Native 组件中使用它时，我得到了这个错误：

[MobX] Cannot apply 'observable' to 'MyStore@2.value': Field not found.

如果我在调用 makeObservable 之前将 value 初始化为 null，则一切正常。但是不喜欢我们的网络组件和移动组件之间的行为有何不同。如果我不能让它们的行为相同，这可能会成为未来错误的来源。

知道是什么导致了这种行为，为什么两种环境之间的这种行为可能不同？

Answer 1

它是 limitations of make(Auto)Observable if you haven't setup your compiler with additional options 之一。因此，您的一个项目可能与另一个项目的设置不同。

TypeScript: 设置编译选项"useDefineForClassFields": true.

Babel: 确保至少使用 7.12 版本，配置如下：

{
    "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],
    // Babel >= 7.13.0 (https://babeljs.io/docs/en/assumptions)
    "assumptions": {
        "setPublicClassFields": false
    }
}

通常最好在构造函数中最后调用make(Auto)Observable，and/or立即定义属性。例如，在你的情况下，只需用空字符串定义它（它更正确，因为你当前的代码无论如何都不会在 strict 模式下编译）：

class MyStore {
  // No need for explicit type that way
  value = '';

  constructor() {
    makeObservable(this, {value: observable});
  }
}

为什么 Mobx 6 的行为在我的两个环境中不同？

Why is Mobx 6 behavior different between my two environments?

mobx