使用 mobx 做出反应时未定义存储值答案

【问题标题】：Store values are undefined on react using mobx使用 mobx 做出反应时未定义存储值
【发布时间】：2018-04-10 20:39:44
【问题描述】：

我在 mobx/react 上有非常简单的配置。我试图为下面的笔记制作简单的商店

//modal class
class Note {
    @observable body;
    @observable date;
    @observable by;
    @observable starred;

    constructor(body, by) {
        this.body = body;
        this.date = date.now();
      this.by=by;
      this.starred=false;
    }
}


//controller class
class NoteList {
    @observable notes = [];
    @computed get StarredNote() {
        return this.notes.filter(note => note.starred).length;
    }
}


const note_store =  new NoteList();
export default note_store
console.log('here');
console.log(note_store);


note_store.notes.push(
    new Note("Note 1",'SB'),
    new Note("Note 2",'PS')
);

但我得到了 note_store 值 undefined ，这里有什么问题？

我的.babelrc

{
  "presets" : ["es2015", "react"],
  "plugins": ["transform-class-properties","transform-decorators-legacy"]
}

【问题讨论】：

标签： reactjs store ecmascript-5 mobx mobx-react

【解决方案1】：

我搞定了，是因为插件的顺序

来自文档

注意：插件的顺序很重要！

如果您手动包含插件并使用 transform-class-properties，请确保 transform-decorators-legacy 位于 transform-class-properties 之前。

/// WRONG

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

// RIGHT

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

【讨论】：

这简直拯救了我的一天。