如何在Mobx中遍历数组且不触发指定Observer派生警告？

1. 确保组件被observer高阶组件包裹 #

你的组件必须用mobx-react-lite提供的observer包裹，Mobx才能追踪组件内可观察值的读取和变化。修改组件代码如下：

import { observer } from 'mobx-react-lite';
import { Box } from '你的UI库路径';

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

export default YourComponent;

2. 确认menuBarStore.items是Mobx可观察数组 #

如果items只是普通JS数组，Mobx无法感知它的变化，也就不会触发追踪。需要在Store类中用makeAutoObservable或makeObservable将其标记为可观察：

import { makeAutoObservable, observable } from 'mobx';

class MenuBarStore {
  // 初始化items数组
  items: MenuStore[] = [];

  constructor() {
    // 自动将类内所有属性/方法标记为可观察、动作等（推荐）
    makeAutoObservable(this);

    // 或者手动指定（如果需要更精细的控制）
    // makeObservable(this, {
    //   items: observable,
    // });
  }
}

// 单例Store实例
export const menuBarStore = new MenuBarStore();

3. 检查MenuStore的label属性是否为可观察值 #

如果menuStore.label不是可观察属性，即使items是可观察数组，组件也可能因为没有读取到有效可观察值触发警告。确保MenuStore类同样被Mobx处理：

class MenuStore {
  label: string;

  constructor(label: string) {
    this.label = label;
    makeAutoObservable(this);
  }
}

经过以上步骤，Mobx就能正确追踪menuBarStore.items和menuStore.label的变化，警告会自动消失。

内容的提问来源于stack exchange，提问作者James Kelly