Mobx: реакция на наблюдение объекта не работает - PullRequest
Новая
       4

Mobx: реакция на наблюдение объекта не работает

0 голосов
/ 26 ноября 2018

Вот мой магазин: 

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, что мне делать?

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Чтобы реакция работала, вам нужно, чтобы она наблюдала за свойством наблюдаемого, а не корнем obj. 

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

Вот рабочий пример этого здесь: https://codesandbox.io/s/km3n38yrj7

(Откройте консоль браузера, чтобы увидеть вывод.)

Документация охватывает это здесь:

Важно отметить, что сторонаЭффект будет реагировать только на данные, к которым был получен доступ в выражении данных, которые могут быть меньше, чем данные, которые фактически используются в эффекте.

В исходном коде у вас не было доступа к чему-либо на 'obj '.

Поскольку вы хотите что-то сделать, когда что-либо в' obj 'изменилось:

Что я хочу сделать, если какое-либо свойство в obj изменилось, обратный вызов реакции будетбыть вызванным.

Звучит так, как будто вы вместо этого хотите 'наблюдать' . 

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

Я обновил ссылку на коды и окна, чтобы показать это.

0 голосов
/ 28 ноября 2018

попробуем так как 

`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;

`

...