reactjs - Mobx 使用类模型来定义 observables
问题描述
我尝试将 observables 设置为类模型的映射,但由于某种原因,Mobx 没有检测到类模型是否发生了变化。我做了一些修改,发现 Mobx 只检测对数组、映射、对象和原语之一的可观察对象的更改。这是一个例子。
所以我在文档中读到 mobx 也支持类实例作为可观察对象。一定有什么我做错了。
我选择了对象类型,但是有什么方法可以将类模型用作可观察对象,以便我可以在其中添加一些方法?
class Task {
@observable list = new Map();
@action addTask = (data, type) => {
// this works when i use this
task = type === TASKTYPE.ROUTINE ? {
...Some Data
} : {
...Some Data
};
// but not this
task = type === TASKTYPE.ROUTINE ? new Routine({
...Some Data
}) : new Todo({
...Some Data
});
this.list.set(task.id, task);
updateTask(this.list);
}
// Whenever i call these actions below in some component it mutates the list only on the action block
// but doesnt reflect the changes if i use the 2nd option above
@action deleteTask = (id) => {
this.list.delete(id);
updateTask(this.list);
}
@action addTime = (item, amount = 10) => {
const nItem = this.list.get(item.id);
nItem.timeSpent = nItem.timeSpent + amount;
this.list.set(item.id, nItem);
updateTask(this.list);
}
}
解决方案
因此,您需要使容器和容器内的or实例Task.list
的每个相关原语都成为可观察的。我不使用装饰器,因此您必须检查语法是否正常。Routine
Todo
class Task {
@observable list = new Map();
@action addTask = (data, type) => {
task = type === TASKTYPE.ROUTINE ? new Routine({
id: "someId"
}) : new Todo({
id: "someOtherId",
settings: {}
});
this.list.set(task.id, task);
updateTask(this.list);
}
}
class Routine {
constructor(options) {
//each primitive inside the class can be observed
@observable this.id = options.id;
}
}
class Todo {
constructor(options) {
@observable this.id = options.id;
//you can also observe changes to objects
@observable this.settings = options.settings;
}
}
希望有帮助。
推荐阅读
- java - 卡夫卡消费者- ClassCastException java
- php - 在 sql 表上选择函数
- javascript - Jest/Enzyme:如何处理在另一个内部调用的异步函数?
- javascript - CSS模糊整个部分,而不模糊内部的div
- unity3d - Unity3D多人游戏中相机的奇怪行为
- gradle - Gradle 属性代理无法识别
- javascript - 更改时的角度选择值未更新
- python - 使用 Pandas 在列上提取文本中的子字符串
- google-cloud-platform - 谷歌语音到文本无法识别大量音频
- java - 使用Java在android studio中查询firebase数据库