如果 Mobx @observable 的初始值在 react-native 0.59 中未定义，则它不起作用

Question

我正在将 react-native 0.51.1 迁移到 0.59.8。我正面临 Mobx 的问题。

如果@observable 修饰的成员像这样分配了初始值

@observable cnt = 0;

然后就可以了。

但如果未定义，

@observable cnt;

那就不行了

我有许多未定义的可观察商店，它们在 0.51.0 中工作。
我想让它像未定义的那样工作。

迁移期间更改了 Babel 装饰选项。

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-transform-flow-strip-types'],
    ['@babel/plugin-proposal-decorators', { 'legacy': true}],
    ['@babel/plugin-proposal-class-properties', { 'loose': true}],
  ],
}

//This doesn't work but worked in react-native 0.51.0
import { observable } from 'mobx';

export class Count {
  @observable cnt;

  constructor(initValue = 0) {
    this.cnt = initValue;
  }

  add(){
    this.cnt++;
  }
}

//This works
import { observable } from 'mobx';

export class Count {
  @observable cnt = 0;

  constructor(initValue = 0) {
    this.cnt = initValue;
  }

  add(){
    this.cnt++;
  }
}

Answer 1

我通过显式 undefined 解决了这个问题。

@observable cnt = undefined;

Answer 2

我在使用带有 Typescript 的 Babel 时遇到了这个问题。罪魁祸首是这些 babel 插件：

    ['@babel/plugin-transform-flow-strip-types'],
    ['@babel/plugin-proposal-decorators', { legacy: true }],

这些插件似乎无法调用未初始化 class 属性上的装饰器。他们可能会干扰 Typescripts 对 class 属性的处理。

我的 babel.config.js 现在看起来像这样：

module.exports = {
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
    presets: ['module:metro-react-native-babel-preset']
};

如果 Mobx @observable 的初始值在 react-native 0.59 中未定义，则它不起作用

Mobx @observable is not work if its init value is undefined in react-native 0.59

observable

react-native

mobx

mobx-react