如何在 Mobx 中迭代数组而不触发“在不读取任何可观察值的情况下创建/更新派生‘观察者’”。警告

Question

我正在使用：

"mobx": "^6.6.2",
"mobx-react-lite": "^3.4.0",

想要对我的 .tsx 中的商店数组执行一个简单的 .map （.items 类型为 MenuStore[]）

{menuBarStore.items.map((menuStore, index) => {
    return <Box key={index}>{menuStore.label}</Box>;
})}

但这会给出 Mobx 警告：

[mobx] Derivation 'observer' is created/updated without reading any observable value.

如何在不禁用警告的情况下解决此问题？

Answer 1

所有这些警告意味着该代码正在观察者函数中运行（例如，作为观察者的反应组件的渲染），并且函数内部（在代码中）引用的任何内容实际上都是可观察的。因此，观察者有点无用，因为它没有什么可观察的。

如果这是一个 UI 组件，并且您希望它在项目数组发生更改时重新渲染，则将该数组设为 observableArray，它将跟踪数组本身的更改（尽管不会跟踪现有单个项目的更改）。

如果项目本身也是可观察的，那么更改项目将触发重新渲染，我认为这是因为您映射了所有项目，因此每个项目都在观察者函数内部被引用，因此被观察到。

请注意，据我所知，将数组制作为 observableArray 确实涉及迭代和复制原始数组。大多数时候（比如 99% 的时间），这在性能方面是不明显的，但如果数组非常大或者项目有很多属性，那么如果频繁重新创建数组，可能会成为性能问题。