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

Question

我只是 MobX 的初学者。我正在尝试 MobX 中的计算属性和运行进入此错误

[mobx] Cycle detected in computation Store@1.values: function () {
  initializeInstance(this);
  return this[prop];
}

我创建了一个商店 class，其中包含一个可观察计算属性。当我尝试在反应功能组件中使用它时，它给了我这个错误。我看到了一堆 github 问题，它们针对相同的错误消息而打开，但它们都是针对非常具体的情况。我明白这是因为计算属性的值在至少计算一次之前被访问。我想不通的是如何避免这种情况。我在此 link 中制作了一个非常简单的用例，可以重现此错误。

Answer 1

您有 2 个 class 同名字段 values，一个是 observable，另一个是 computed，您不能同时使用它们并且您其实两个都不需要。

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

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

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

computed 用于计算东西（好吧，duh）或从另一个 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

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

Cycle detected error for @computed properties

javascript

reactjs

mobx

mobx-react