在 react 应用中，直接修改状态中的数组或对象属性会导致“cannot assign to read only property”错误，且无法触发 ui 更新。本文将详细讲解如何在 react 中正确地更新数组中对象的属性值，核心在于遵循 react 的不可变性原则，通过创建数据副本并更新状态，确保组件能够响应式地重新渲染。
理解 React 状态管理与不可变性
在 React 中，组件的 UI 是由其状态（State）驱动的。当状态发生变化时，React 会重新渲染组件以反映这些变化。然而，React 的状态更新机制依赖于引用比较：它会检查新的状态引用是否与旧的状态引用不同。如果直接修改现有状态对象或数组的内部属性，其引用本身并未改变，React 就无法检测到变化，因此不会触发重新渲染。此外，在严格模式（Strict Mode）下，或者当状态数据被冻结（例如，通过 Object.freeze()）时，直接赋值还会导致“Cannot assign to read only property”错误。
因此，在 React 中更新状态时，必须遵循“不可变性”原则，即不直接修改原始状态数据，而是创建新的数据副本，然后在新副本上进行修改，最后用这个新副本替换旧状态。
错误的更新方式及其原因
考虑以下场景，我们有一个包含多个对象的数据数组，并希望通过点击按钮来改变其中一个对象的 Actions 属性：
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,
},
];
// 错误的尝试
<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>上述代码尝试直接修改 Data 数组中第一个对象的 Actions 属性。这会导致两个问题：
- “Cannot assign to read only property”错误：如果 Data 数组或其内部对象被冻结，或者在某些 JavaScript 环境下，直接修改会抛出此错误。
- UI 不会更新：即使没有抛出错误，由于 Data 数组的引用没有改变，React 也不会认为状态已更新，因此不会重新渲染组件来反映 Actions 值的变化。
正确的更新方式：利用 useState 和不可变性
在 React 函数组件中，我们使用 useState Hook 来管理状态。要正确更新数组中对象的属性，需要执行以下步骤：
WEBGM2.0版对原程序进行了大量的更新和调整，在安全性和实用性上均有重大突破.栏目介绍：本站公告、最新动态、网游资讯、游戏公略、市场观察、我想买、我想卖、点卡购买、火爆论坛特色功能：完美的前台界面设计以及人性化的管理后台，让您管理方便修改方便；前台介绍：网站的主导行栏都采用flash设计，美观大方；首页右侧客服联系方式都采用后台控制，修改方便；首页中部图片也采用动态数据，在后台可以随意更换图片
- 将数据存储在组件状态中：使用 useState 初始化你的数据数组。
- 创建数组的浅拷贝：当需要修改数组中的某个元素时，首先创建整个数组的一个新副本。
- 定位并修改目标对象：在新副本中找到需要修改的对象，并更新其属性。
- 使用状态更新函数：调用 useState 返回的更新函数，传入修改后的新数组副本。
下面是一个完整的示例，演示了如何通过点击按钮来更新数组中指定对象的 Actions（或 disabled）属性：
import React, { useState } from 'react';
// 初始数据
const initialData = [
{
FileID: 1,
Name: 'David',
Date: '10/02/2022',
hour: '21:00',
Actions: true, // 假设Actions代表是否可操作
},
{
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,
},
];
function DataUpdater() {
// 使用 useState 管理数据数组
const [dataList, setDataList] = useState(initialData);
/**
* 处理按钮点击事件，更新指定 FileID 的对象的 Actions 属性
* @param {number} fileId 要更新的对象的 FileID
*/
const handleUpdateAction = (fileId) => {
// 1. 创建 dataList 的一个浅拷贝
const updatedDataList = [...dataList];
// 2. 查找要更新的对象的索引
const index = updatedDataList.findIndex(item => item.FileID === fileId);
// 3. 如果找到了对象，则更新其 Actions 属性
if (index !== -1) {
// 在拷贝的数组中修改对象属性。
// 注意：这里直接修改了拷贝数组中的对象，这对于浅层对象是可行的。
// 如果对象内部还有嵌套对象，且需要深度不可变，则需要进一步拷贝内部对象。
updatedDataList[index].Actions = false;
// 4. 使用 setDataList 更新状态，触发组件重新渲染
setDataList(updatedDataList);
}
};
return (
<div className="p-4">
<h2 className="text-xl font-bold mb-4">数据列表</h2>
{dataList.map((item) => (
<div key={item.FileID} className="mb-2 p-3 border rounded-md flex items-center justify-between">
<span>
FileID: {item.FileID}, Name: {item.Name}, Actions: {item.Actions ? 'Enabled' : 'Disabled'}
</span>
<button
disabled={!item.Actions} // 按钮的 disabled 状态取决于 Actions 属性
onClick={() => handleUpdateAction(item.FileID)}
className={`p-2 rounded-md text-sm text-white
${item.Actions ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-400 cursor-not-allowed'}
`}
>
{item.Actions ? '禁用此项' : '已禁用'}
</button>
</div>
))}
</div>
);
}
export default DataUpdater;代码解析：
- useState(initialData)：dataList 变量持有当前的数据数组，setDataList 是用于更新这个数组的函数。
- [...dataList]：这是 JavaScript 的扩展运算符，用于创建一个 dataList 数组的浅拷贝。这样，我们就可以在新数组上进行操作，而不会直接修改原始的 dataList 状态。
- findIndex()：用于找到需要修改的对象的索引。
- updatedDataList[index].Actions = false;：直接修改了拷贝数组中特定对象的 Actions 属性。由于 updatedDataList 是一个新数组，即使它内部的对象引用与原数组中的对象相同，但由于 updatedDataList 本身是一个新引用，setDataList 会检测到变化并触发重新渲染。
- setDataList(updatedDataList)：将修改后的新数组设置为组件的新状态。React 会检测到 dataList 的引用已经改变，从而重新渲染组件，反映出 Actions 属性的最新值。
注意事项与最佳实践
-
浅拷贝与深拷贝：上述示例使用了数组的浅拷贝 ([...dataList])。这意味着数组中的对象本身仍然是原始对象的引用。如果你的对象内部还有嵌套的对象或数组，并且你需要修改这些嵌套结构，那么你可能需要进行深拷贝（例如使用 JSON.parse(JSON.stringify(obj)) 或专门的深拷贝库如 Lodash 的 cloneDeep）或者在修改嵌套对象时也遵循不可变性原则，逐层创建副本。
- 例如，如果 item 对象内部有 details: { description: '...' }，并且你要修改 description，则需要这样操作：
updatedDataList[index] = { ...updatedDataList[index], // 拷贝原对象的所有属性 Actions: false, // 更新 Actions 属性 details: { // 也要拷贝 details 对象 ...updatedDataList[index].details, description: 'new description' // 更新嵌套属性 } };
- 例如，如果 item 对象内部有 details: { description: '...' }，并且你要修改 description，则需要这样操作：
- 性能考虑：对于非常大的数组或频繁的状态更新，频繁地创建数组和对象的副本可能会带来一定的性能开销。在这种情况下，可以考虑使用专门的不可变数据结构库，如 Immer.js，它允许你以“可变”的方式编写代码，但在底层会自动处理不可变更新，从而简化代码并优化性能。
- 状态提升：在更复杂的应用中，如果多个组件需要访问或修改相同的数据，你可能需要将状态提升到它们的共同父组件，并通过 props 传递数据和更新函数。
总结
在 React 中更新数组中对象的属性，核心在于理解并实践不可变性原则。避免直接修改原始状态，而是通过创建数据副本，在新副本上进行修改，然后使用 useState 的更新函数来替换旧状态。这种模式不仅能避免“read-only”错误，更能确保 React 能够正确地检测到状态变化并触发 UI 重新渲染，从而构建出稳定、可预测且易于维护的应用程序。
