检测mobx observable何时发生变化

时间:2016-10-11 22:30:10

标签: reactjs react-jsx mobx mobx-react

是否有可能以任何方式检测到可观察到的变化?

例如,说你有这个:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]

稍后,通过一些用户输入,值会发生变化。我怎样才能轻易地发现这个?

我想添加一个全局" save"按钮,但只有在初始加载后该可观察量发生变化时才能使其可单击。

我当前的解决方案是添加另一个返回true / false的可观察myObjectChanged,并且在组件更改myObject中的数据的任何地方,我还添加一行将myObjectChanged更改为true。如果单击保存按钮,它会保存并将该可观察值更改为false。

这导致了大量额外的代码行。有更好/更清洁的方法吗?

2 个答案:

答案 0 :(得分:2)

您可以使用autorun来实现此目标:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]
@observable state = { dirty: false }

let firstAutorun = true;
autorun(() => {
  // `JSON.stringify` will touch all properties of `myObject` so
  // they are automatically observed.
  const json = JSON.stringify(myObject);
  if (!firstAutorun) {
    state.dirty = true;
  }
  firstAutorun = false;
});

答案 1 :(得分:0)

创建一个将推送到myObject并设置myObjectChanged

的操作
@action add(item) {
    this.myObject.push(item);
    this.myObjectChanged = true;
}