React Mobx技术问询：如何创建原子化存储更新函数避免更新中触发渲染

首先直接给结论：当然可以创建原子化的存储更新函数，而且这正是解决你遇到的索引越界问题的关键。

你遇到的问题本质是：Mobx（以及多数React状态管理库）会在响应式属性发生变化时立即触发组件重新渲染。如果你的更新函数是分步修改状态（比如先复制数组赋值给this.array，再去修改数组内部元素），组件就会在中间步骤拿到一个“未完成”的状态，此时访问数组索引自然会出错。

解决方案1：内存中完成所有修改，再一次性赋值响应式属性 #

核心思路是：先在非响应式的内存空间里完成数组的所有修改，确认数据完整后，再把最终结果赋值给store的响应式属性。这样组件只会在更新完成后触发一次渲染，不会接触到中间状态。

举个修正后的例子：

class MyStore {
  array = [/* 初始多维数组 */];

  update(indices, value) {
    // 1. 先深拷贝原数组到内存中（浅拷贝适用于一维数组，多维数组需要深拷贝）
    const updatedArray = JSON.parse(JSON.stringify(this.array));
    
    // 2. 在内存中完成所有索引定位和值修改
    let currentLevel = updatedArray;
    for (let i = 0; i < indices.length - 1; i++) {
      const index = indices[i];
      // 可选：提前校验索引是否存在，避免后续错误
      if (!currentLevel[index]) {
        throw new Error(`Array index ${index} does not exist at level ${i}`);
      }
      currentLevel = currentLevel[index];
    }
    // 赋值最终目标值
    currentLevel[indices[indices.length - 1]] = value;

    // 3. 一次性赋值给响应式属性，触发唯一一次渲染
    this.array = updatedArray;
  }
}

解决方案2：用Mobx的action包裹更新函数 #

Mobx的action装饰器（或函数）会把函数内的所有状态变化打包成一个原子操作，只有当整个动作执行完成后，才会通知组件重新渲染。这样即使你在函数内分步修改状态，组件也不会感知到中间过程。

示例代码：

import { action, makeObservable, observable } from 'mobx';

class MyStore {
  array = [/* 初始多维数组 */];

  constructor() {
    makeObservable(this, {
      array: observable,
      update: action,
    });
  }

  update(indices, value) {
    // 这里可以分步修改，但因为在action内，Mobx会批量处理状态变化
    const newArray = [...this.array]; // 浅拷贝一维数组，多维需深拷贝
    let currentLevel = newArray;
    for (let i = 0; i < indices.length - 1; i++) {
      currentLevel = currentLevel[indices[i]];
    }
    currentLevel[indices[indices.length - 1]] = value;
    
    this.array = newArray;
  }
}

通用原则（适用于所有React状态管理库） #

不管用Mobx、Redux、Zustand还是其他库，核心都是不让组件接触到未完成的状态：

• Redux：reducer是纯函数，必须返回完整的新state，天然是原子化的；
• Zustand：在set函数内完成所有状态修改，再返回新状态；
• 所有库：避免分步修改响应式状态，尽量在内存中完成所有逻辑后再提交状态更新。

回到你的问题：调用store.update([0], 0)时的索引越界，就是因为组件在更新过程中拿到了还没修改完成的数组。用上面两种方法之一，就能确保组件只有在数组完全更新后才会渲染，彻底解决这个问题。

内容的提问来源于stack exchange，提问作者Keven Wang