嵌套的可观察对象不会触发反应

Question

我有一个具有嵌套可观察属性的可观察 class：

class TodoItem {
  @observable name: string = "";
  @observable completed: boolean = false;

  @action
  setCompleted(value: boolean) {
    this.completed = value;
  }

  constructor(name: string) {
    this.name = name;
    makeObservable(this);
  }
}

class TodoList {
  @observable todos: TodoItem[] = [];

  @action
  addTodo(todo: TodoItem) {
    this.todos.push(todo);
  }

  constructor() {
    makeObservable(this);
  }
}

当我尝试修改 TodoList 实例的 todos 属性中的 TodoItem 时，未触发 reaction 块：

reaction(
  () => store.todos,
  (value) => {
    console.log(value);
  }
);

演示：https://codesandbox.io/s/mobx-reaction-81q33n

预期：切换待办事项时，待办事项列表应打印到控制台

成功：未打印任何内容

Answer 1

要真正对某些可观察值的变化做出反应，您需要使用它，或者 dot into 它或 touch 它，无论您怎么称呼它。您的 reaction 仅跟踪对 store.todos 数组本身的更改，因此如果您更改此数组，它将触发。

如果您明显修改其中的某些项目，它不会触发，因为此反应不会touch或以任何方式使用它们。

如果你想对 store.todos 内的所有变化做出反应，你可以使用 JSON.stringify 或 MobX 方法 toJS，像这样：

reaction(
  () => JSON.stringify(store.todos),
  (value) => {
    console.log(value);
  }
);

嵌套的可观察对象不会触发反应

Reaction not being triggered by nested observables

javascript

reactjs

state

mobx

mobx-react