React Native：修改其他文件中的数组时出现只读属性赋值错误

数据老陈

2026-8-15

直接修改模块导入数组触发错误的解决办法

问题场景

你在data文件夹中存放数组文件，默认导出空数组后在组件中导入并尝试修改，代码示例如下：

// './data/array.js'
const array = [];
export default array;

// './screens/component.js'
import array from '../data/array';
array.push(x);

执行上述代码时触发错误。

错误原因

ES模块的只读引用限制：ES模块导出的变量是只读引用，虽然理论上可以修改引用对象的内部内容，但部分运行环境（如框架生产构建模式、严格模式下的安全限制）会将导出的数组标记为不可扩展或只读，直接调用push这类修改数组的方法就会触发错误。
状态污染风险：即便没报错，直接修改模块导出的数组会导致所有导入该数组的组件共享同一个实例，一处修改全组件生效，极易引发难以排查的逻辑bug。

解决办法

1. 导入后创建数组副本再操作

每次导入原数组后，先创建一个独立副本，再对副本进行修改，避免影响原模块的数组：

// './screens/component.js'
import originalArray from '../data/array';
// 用扩展运算符创建副本
const array = [...originalArray];
array.push(x);
// 后续业务逻辑使用这个副本

2. 数据模块导出创建数组的函数

不要直接导出数组实例，而是导出一个返回新数组的函数，确保每个导入的组件都能拿到独立的数组：

// './data/array.js'
export default function createArray() {
  return [];
}

// './screens/component.js'
import createArray from '../data/array';
const array = createArray();
array.push(x);