javascript - @compated 属性循环检测到错误

Question

我只是 MobX 的初学者。我在 MobX 中尝试计算属性并遇到了这个错误

[mobx] Cycle detected in computation <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a290e15081f3a4b540c1b160f1f09" rel="noreferrer noopener nofollow">[email protected]</a>: function () {
  initializeInstance(this);
  return this[prop];
}

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

Answer 1

您有 2 个具有相同名称 values 的类字段，一个是 observable，另一个是 compulated，您不能同时使用这两个字段它们，但实际上你并不需要它们。

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

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

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

compated 用于计算东西(好吧，废话)或从另一个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