更改计算数组时，MobX 不更新 React 组件答案

【问题标题】：MobX not updating React Component when computed array is changed更改计算数组时，MobX 不更新 React 组件
【发布时间】：2020-07-23 22:09:38
【问题描述】：

我有一个未排序的待办事项列表。一个计算值被添加到存储返回排序的待办事项。 React 组件使用sortedTodos 来显示列表。每当待办事项列表发生变化时，组件都不会重新渲染，如果我直接使用todos，它就可以工作。

export class TodoStore {
  @observable todos: Todo[] = [
    { description: "testing", createdAt: new Date(), isCompleted: false },
  ];

  @computed get sortedTodos(): Todo[] {
    const sortedTodos = this.todos.sort(
      (a, b) => a.createdAt.getTime() - b.createdAt.getTime()
    );
    return sortedTodos;
  }

  @action addTodo = (description: string) => {
    this.todos.push({
      description,
      createdAt: new Date(),
      isCompleted: false,
    });
  };
}

【问题讨论】：

我不熟悉 mobx，但我知道 react 会对 state/props 进行浅层引用相等性检查以确定组件是否应该重新渲染。数组是就地排序的，所以数组引用不会改变。如果sortedTodos 返回一个 new 数组，它可能会起作用。
你的 mobx 代码是正确的。能否在codeandbox上发布组件代码或进行复制？

标签： reactjs mobx mobx-react

【解决方案1】：

我找到了问题的解决方案。

我没有直接分配一个数组，而是使用了observable.array，它可以工作。

export class TodoStore {
  @observable todos: Todo[] = observable.array();

  ...
}

不完全确定为什么会这样，但它确实有效。我认为原因是通过使用常规数组，默认情况下里面的对象不是可观察的，当使用observable.array时，数组的对象本身就是可观察的。

【讨论】：

你可以删除@observable装饰器。
@IvanV。是否有一个装饰器可以处理这种行为，即它也可以使数组的子对象成为可观察对象。
奇怪的是，@decorator 一开始就不起作用。同样observable 和observable.array 默认为deep，这意味着添加到数组中的任何内容也将成为可观察的。我仍然认为您在反应组件中使用可观察对象的方式存在错误。您发布的原始代码按预期工作。