Question

这是我的商店：

import { observable, action, flow, reaction } from "mobx";

export default class Demo {
  @observable obj = {
    flag: false,
    name: "",
    age: 20
  };

  @action
  turnFlag = () => {
    this.obj.flag = true;
  };

  constructor() {
    reaction(
      () => this.obj,
      obj => {
        console.log(obj.flag);
      }
    );
  }
}

我想做的是，如果obj中的任何属性被更改，则将调用反应回调。

但是当执行动作turnFlag时，什么也没发生。

那么我的代码有什么问题？如果我希望主管对obj进行任何更改，该怎么办？

Answer 1

尝试为

`import { observable, action, flow, reaction } from "mobx";

class Demo {
  @observable obj = {
    flag: false,
    name: "",
    age: 20
  };

  @action
  turnFlag = () => {
    this.obj.flag = true;
  };

  constructor() {
    reaction(
      () => this.obj,
      obj => {
        console.log(obj.flag);
      }
    );
  }
}
export default Demo;

`

Answer 2

要使反应正常进行，您需要让其观察可观察对象的属性，而不是根obj。

reaction(
  () => this.obj.flag,
  flag => { console.log(`FOO: ${flag}`); }
);

这里有一个有效的示例：https://codesandbox.io/s/km3n38yrj7

（打开浏览器控制台以查看输出。）

documentation在这里介绍了这一点：

重要的是要注意，副作用只会对数据表达式中访问的数据产生反应，而该数据可能少于该效果中实际使用的数据。

在原始代码中，您没有访问'obj'上的任何内容。

由于您想在'obj'上的任何内容更改时都要做某事：

我想做的是，如果obj中的任何属性发生更改，则将调用反应回调。

听起来您好像要'observe'。

observe(this.obj, change => {
  console.log(
    `${change.type} ${change.name} from ${change.oldValue}` +
      ` to ${change.object[change.name]}`
  );
});

我已经更新了codeandbox链接以显示该信息。

Mobx：观察对象的反应不起作用

2 个答案: