React中如何转换MobX Store的Proxy数组并按LocalStorage映射排序

• 遍历目标数组，生成按索引映射的排序规则数组并存入Local Storage
• 应用首次挂载时检测Local Storage中是否存在该映射值，若存在则对从Store获取的Proxy类型数据数组排序，使其按照LocalStorage中存储的映射规则展示

问题描述 #

从Store获取数据的代码如下：

const chocolates = machineStore?.SubsystemsInfo

该返回值为Proxy类型，控制台输出时需要经过JSON.stringify和JSON.parse处理才能查看具体内容。
组件挂载阶段已从LocalStorage中获取到映射索引数组，但存在两个核心问题：

• 原始数据为Proxy类型，无法直接访问数组本身完成排序，无法按映射规则渲染原始数组
• 已尝试展开运算符、JSON序列化反序列化方案，执行后均得到空数组

解决方法 #

排查取数时机问题 #

展开、序列化后得到空数组的核心原因通常不是Proxy类型本身，而是取数时机过早：组件首次挂载时Store内的SubsystemsInfo还未完成异步赋值，此时Proxy代理的目标值本身就是空数组。
不要在挂载同步阶段直接执行取数排序逻辑，增加响应式依赖监听，等SubsystemsInfo有真实值后再执行后续操作。

转换Proxy为普通可操作数组 #

• 若使用Vue/Pinia生态的响应式Proxy，直接调用官方提供的toRawAPI获取原始对象，不要直接对Proxy对象做展开、序列化操作：

import { toRaw } from 'vue'
// 等SubsystemsInfo有值后执行
const rawData = toRaw(machineStore.SubsystemsInfo)
// 浅拷贝生成普通数组，避免直接修改原始响应式数据
const plainArr = Array.from(rawData ?? [])

• 若为其他框架生成的Proxy，可通过Array.from()、Array.prototype.slice.call()方法对代理目标做浅拷贝，生成可操作的普通数组。

注意：禁止直接修改toRaw取出的原始响应式对象，会绕过框架的响应式更新机制，所有排序、遍历操作都在拷贝生成的普通数组上执行。

按映射规则排序 #

拿到普通数组后，直接根据LocalStorage中存储的索引映射重排数组即可：

// sortMap为从LocalStorage中取出的索引映射数组，格式为[原数组索引1, 原数组索引2, ...]
const sortedResult = sortMap.map(idx => plainArr[idx]).filter(Boolean)

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