循环检测到@computed属性的错误

问题描述

我只是MobX的初学者。我正在尝试使用MobX中的计算属性并遇到此错误

[mobx] Cycle detected in computation [e-mail]: function () {
  initializeInstance(this);
  return this[prop];
}

我创建了一个具有可观察计算属性的商店类。当我尝试在React功能组件中使用它时，它给了我这个错误。我看到了针对相同错误消息打开的一堆github问题，但它们都是针对非常特殊的情况。我知道这是因为在至少计算一次之前就已经访问了计算属性的值。我不知道如何避免这种情况。我在这个link中做了一个非常简单的用例，可以重现此错误。

解决方法

您有2个具有相同名称values的类字段，一个是observable，另一个是computed，您不能同时使用它们，并且实际上不需要其中

export default class Store {
  @observable values; // <--- Not needed

  constructor() {
    this.selectedFilters = {};
    this.assetMap = {};
    this.searchResults = {};
  }

  @computed get values() {
    return [{}];
  }
}

computed用于计算填充（嗯，嗯）或从另一个observable导出一些值。例如，您可以这样使用它

export default class User {
  @observable name = 'John'; 
  @observable lastName= 'Doe'; 

  @computed get fullName() {
    return this.name + this.lastName
  }
}

或者在您的情况下，这样的事情可能会有用

export default class Store {
  @observable values = []

  @computed get filteredValues() {
    return this.values.filter(someFilterFunction);
  }
}

文档https://mobx.js.org/refguide/computed-decorator.html

中的更多内容