React-Native中Mobx越界读取警告的消除求助

问题原因 #

这个警告通常触发于两种场景：

• 你的数组未被Mobx标记为可观察状态，导致状态追踪机制在数组长度变化后，仍尝试访问已超出边界的旧索引
• 直接返回原始状态数组给外部，外部代码在数组被修改后访问了已不存在的索引，触发Mobx的追踪警告

解决方案 #

1. 将数组转为Mobx可观察数组 #

确保store中的arr是Mobx管理的可观察状态，在类构造函数中使用makeAutoObservable自动处理状态追踪：

import { makeAutoObservable } from "mobx";

class AppState {
  constructor() {
    this.arr = [];
    // 自动将类属性转为可观察状态，方法转为action/computed
    makeAutoObservable(this);
  }

  getArray() {
    return this.arr;
  }

  // 统一在action方法内修改数组，确保状态变更被正确追踪
  addItem(item) {
    this.arr.push(item);
  }
}

export const appState = new AppState();

2. 返回数组副本而非原始数组 #

避免外部直接引用原始状态数组，返回副本可以切断外部对原始状态的依赖，防止因外部操作触发越界追踪：

getArray() {
  // 扩展运算符创建数组副本
  return [...this.arr];
  // 或使用slice()创建副本
  // return this.arr.slice();
}

3. 排查并修复越界索引访问 #

检查使用temp数组的代码，避免硬编码索引访问。改为安全的条件判断式访问：

const temp = appState.getArray();
// 安全访问索引2，先判断数组长度
if (temp.length > 2) {
  const targetItem = temp[2];
  // 后续处理逻辑
}

4. 在action内处理数组修改（可选） #

所有数组修改操作统一放在store的action方法中，避免外部直接修改状态数组，确保状态变更符合Mobx的追踪规则：

// 在store内添加删除元素的action方法
removeItemAtIndex(index) {
  if (index >= 0 && index < this.arr.length) {
    this.arr.splice(index, 1);
  }
}

内容的提问来源于stack exchange，提问作者Jemish Rajpara