如何修改const声明的数组对象属性值？解决点击按钮赋值报错

我有以下用export const声明的数组对象：

export const Data = [
  {
    FileID: 1,
    Name: 'david',
    Date: '10/02/2022',
    hour: '21:00',
    Actions: true,
  },
  {
    FileID: 2,
    Name: 'Ben',
    Date: '10/04/2022',
    hour: '22:00',
    Actions: true,
  },
  {
    FileID: 3,
    Name: 'Alex',
    Date: '22/06/2022',
    hour: '21:00',
    Actions: true,
  },
]

我尝试通过按钮的onClick事件修改第一个对象的Actions属性为false，代码如下：

<button disabled={!Data[0].Actions} onClick={() =>
    Data[0].Actions=false
} className="bg-red-600 mt-2 p-3 rounded-2xl text-sm text-white">
  Click
</button>

运行后出现错误：

Cannot assign to read only property 'Actions' of object '#<Object>'

我希望直接修改原对象的属性值，最终得到如下结果：

export const Data = [
  {
    FileID: 1,
    Name: 'david',
    Date: '10/02/2022',
    hour: '21:00',
    Actions: false,
  },
  {
    FileID: 2,
    Name: 'Ben',
    Date: '10/04/2022',
    hour: '22:00',
    Actions: true,
  },
  {
    FileID: 3,
    Name: 'Alex',
    Date: '22/06/2022',
    hour: '21:00',
    Actions: true,
  },
]

这个错误是因为目标对象的Actions属性被设置为只读，常见触发场景：

• 项目环境（如React严格模式）或打包工具（Webpack/Vite）对导出的常量数据做了冻结优化，禁止修改内部属性；
• 代码运行在严格模式下，直接修改不可变数据的属性会触发报错。

方法一：修改数组声明为let（最简单） #

把export const Data改成export let Data，数组变量本身不能被重新赋值，但内部对象的属性可以正常修改：

export let Data = [
  // 原数组内容不变
]

按钮的onClick逻辑无需修改，直接执行Data[0].Actions = false即可。

方法二：解除属性只读限制（保留const声明） #

如果必须保留const声明，可以通过Object.defineProperty强制修改属性的可写性并赋值：

<button disabled={!Data[0].Actions} onClick={() => {
    Object.defineProperty(Data[0], 'Actions', {
        writable: true,
        value: false
    })
}} className="bg-red-600 mt-2 p-3 rounded-2xl text-sm text-white">
  Click
</button>

方法三：React项目规范方案（推荐） #

如果是React项目，更合理的做法是将数据纳入组件状态管理，避免直接修改导出的常量数据：

import { useState } from 'react';
import { Data as initialData } from './your-data-file';

function YourComponent() {
  const [data, setData] = useState(initialData);

  return (
    <button 
      disabled={!data[0].Actions} 
      onClick={() => {
        // 仅复制数组外壳，内部对象复用原引用，符合你不想创建新对象的需求
        const updatedData = [...data];
        updatedData[0].Actions = false;
        setData(updatedData);
      }} 
      className="bg-red-600 mt-2 p-3 rounded-2xl text-sm text-white"
    >
      Click
    </button>
  );
}

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