javascript - React / MobX：存储值未定义？

Question

我的 MobX 自动运行功能在此处注销了undefined这两个值。此外，在我的组件中import user from '../../stores/UserStore，我使用{user.userName}的所有实例都没有显示任何内容。

import { observable, autorun } from 'mobx'

class UserStore {
  @observable userName = "tommy";
  @observable arr = [0,1]
}

const user = window.user = new UserStore

export default user;


// user.userName = "timmy"; // works, but not observable.

autorun(() => {
  console.log(user.userName) // undefined
  console.log(user.arr) // undefined
})

Answer 1

如果你想在 create-react-app 中使用装饰器，你需要弹出应用程序。“运行 npm runeject 会复制所有配置文件和传递依赖项。 ” https://github.com/facebookincubator/create-react-app我还发现你需要先放置 transform-decorators-legacy 插件，如下所示：

plugins: ['transform-decorators-legacy','transform-class-properties']

在你做完这一切之后。以下将起作用并且已经过测试。

@observer class Counter extends React.Component {
    @observable count = 0
}

Answer 2

只需将以下内容移至文件中插件数组的顶部即可babel.config.js解决我的问题。

["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],