Mobx 如何计算状态中的值

Question

我是 Mobx 的新手，我不知道如何计算商店中的值。

我正在关注 docs description of using the 'computed' modifier。

这是我的（缩减）appState：

export default class AppState {
    constructor() {
        /* MOBX STATE */
        extendObservable(this, {
            // Links
            'links': [],

            'updateLinks': action((newlinks) => {
                this.links = newlinks;
            }),

            'linksWithComments': computed(() => this.links),
        });
    }
}

'links' 在我的 React 组件中工作正常，但是当我添加 'linksWithComments' 时，我看到这个错误：

Uncaught Error: [MobX] 'keys()' can only be used on observable objects, arrays, sets and maps

我做错了什么？ 'links' 是一个数组，据我所知它是可观察的，那么错误是什么意思？我用谷歌搜索了错误消息，但没有找到任何可以解释发生了什么的内容。

我也尝试过这种形式：

get linksWithComments () { return 2*3; },

在这种情况下 'linksWithComments' 未定义。

版本：

"mobx": "^6.1.8",
"mobx-react": "^7.1.0",
"mobx-react-lite": "^3.2.0",

谢谢！

Answer 1

将 MobX@6 与类一起使用的首选方法是使用 makeAutoObservable 或 makeObservable:

class AppState {
  links = [];

  constructor() {
    makeAutoObservable(this);
  }

  updateLinks = (newLinks) => {
    this.links = newLinks;
  };

  get linksWithComments() {
    return this.links.filter((link) => link > 0.5);
  }
}

你试过了吗？

我制作了 Codesanbox example 供您探索！

More info in the official docs

Mobx 如何计算状态中的值

Mobx how to compute values in state

mobx

mobx-react