本教程将深入探讨在React应用中更新数组内对象属性的正确方法。针对直接修改导致"Cannot assign to read only property"错误的问题，我们将介绍如何利用React的`useState` Hook和不可变数据原则，通过创建数据副本、定位并修改目标属性，然后更新状态，从而实现UI的响应式更新。
引言
在React开发中，管理组件状态是核心任务之一。当我们需要更新一个复杂数据结构（例如包含多个对象的数组）中的某个特定属性时，直观的直接修改往往会导致意想不到的错误，甚至无法触发UI更新。本教程将指导您如何遵循React的机制，以正确且响应式的方式实现这一目标。
问题剖析：为什么直接修改会失败？
许多初学者可能会尝试直接修改一个数组中对象的属性，如下所示：
// 假设这是您的数据源
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 },
];
// 尝试直接修改第一个对象的Actions属性
<button onClick={() => Data[0].Actions = false}>
Click
</button>当运行上述代码时，您可能会遇到以下错误信息：
Cannot assign to read only property 'Actions' of object '#<Object>'
这个错误通常发生在以下几种情况：
- 数据源的不可变性：如果Data数组或其内部的对象是从外部模块导入的常量，或者在某些JavaScript环境中被Object.freeze()等方法冻结，那么尝试修改其属性就会失败。
- React状态管理的原则：即使没有明确的冻结，在React组件中，任何需要触发UI更新的数据都必须通过组件的状态（State）来管理。React通过比较新旧状态的引用来判断是否需要重新渲染。如果直接修改现有对象或数组，其引用不会改变，React就无法检测到变化，从而不会触发更新。因此，即使没有read only错误，UI也不会更新。
为了正确地实现数据更新并触发UI重新渲染，我们必须遵循React的状态管理原则和不可变性（Immutability）原则。
React状态管理与不可变性原则
在React中，useState Hook是管理组件内部状态的核心工具。它返回一个状态值和一个更新该状态的函数。
import React, { useState } from 'react';
function MyComponent() {
// 使用useState初始化数据
const [data, setData] = useState([
{ FileID: 1, Name: 'david', Actions: true },
{ FileID: 2, Name: 'Ben', Actions: true },
// ...
]);
// ... 组件逻辑
}不可变性原则是React状态管理中的一个关键概念。它意味着当您想要更新一个对象或数组时，不应该直接修改它，而是应该创建一个新的对象或数组副本，在新副本上进行修改，然后用新副本更新状态。这样做有几个好处：
- 性能优化：React可以更快地检测到状态变化，因为只需要比较引用即可。
- 可预测性：避免了在不同组件或函数中对同一数据进行意外修改，使数据流更清晰。
- 时间旅行调试：更容易实现撤销/重做功能或时间旅行调试。
实现数组中对象属性的更新
遵循不可变性原则，更新数组中对象属性的正确步骤如下：
- 将数据放入组件状态: 使用useState Hook初始化您的数据数组。
- 创建数据副本: 当需要更新时，首先创建一个当前状态数组的浅拷贝。
- 定位并修改目标对象: 在拷贝的数组中，找到需要修改的对象。为了保持不可变性，通常也会对被修改的对象本身进行浅拷贝，然后修改其属性。
- 更新状态: 使用setData函数将修改后的新数组设置为组件的新状态。
下面是一个完整的React组件示例，演示了如何实现这一过程：
import React, { useState } from 'react';
function DataUpdater() {
// 1. 将数据放入组件状态
const [items, setItems] = useState([
{ 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 },
]);
// 2. 定义更新函数，通过FileID来定位要更新的对象
const handleActionToggle = (fileIdToUpdate) => {
// 2.1 使用map方法创建当前状态数组的浅拷贝，并在遍历中修改目标对象
const updatedItems = items.map(item => {
// 2.2 找到需要修改的对象
if (item.FileID === fileIdToUpdate) {
// 2.3 创建目标对象的浅拷贝，并修改其Actions属性
// 这样既保持了数组的不可变性，也保持了被修改对象的不可变性
return { ...item, Actions: !item.Actions }; // 切换Actions状态
}
// 2.4 对于不需要修改的对象，直接返回原对象
return item;
});
// 2.5 更新状态，触发UI重新渲染
setItems(updatedItems);
};
return (
<div>
<h2>数据列表</h2>
{items.map((item) => (
<div key={item.FileID} style={{ marginBottom: '10px', padding: '10px', border: '1px solid #eee', borderRadius: '5px' }}>
<p><strong>FileID:</strong> {item.FileID}</p>
<p><strong>Name:</strong> {item.Name}</p>
<p><strong>Actions:</strong> {item.Actions ? '启用' : '禁用'}</p>
<button
onClick={() => handleActionToggle(item.FileID)}
style={{
backgroundColor: item.Actions ? '#4CAF50' : '#f44336', // 绿色表示启用，红色表示禁用
color: 'white',
padding: '8px 15px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '14px',
}}
>
{item.Actions ? '点击禁用' : '点击启用'}
</button>
</div>
))}
</div>
);
}
export default DataUpdater;替代方法：使用 findIndex
除了map方法，您也可以使用findIndex来定位目标对象，然后在一个数组的浅拷贝上直接修改该对象（同样需要对对象本身进行浅拷贝）：
import React, { useState } from 'react';
function DataUpdaterWithFindIndex() {
const [items, setItems] = useState([
{ 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 },
]);
const handleActionToggleWithFindIndex = (fileIdToUpdate) => {
// 1. 创建数组的浅拷贝
const copy = [...items];
// 2. 找到需要修改的对象的索引
const index = copy.findIndex(item => item.FileID === fileIdToUpdate);
if (index > -1) {
// 3. 对找到的对象进行浅拷贝，然后修改其属性
copy[index] = { ...copy[index], Actions: !copy[index].Actions };
// 4. 更新状态
setItems(copy);
}
};
return (
<div>
<h2>数据列表 (使用 findIndex)</h2>
{items.map((item) => (
<div key={item.FileID} style={{ marginBottom: '10px', padding: '10px', border: '1px solid #eee', borderRadius: '5px' }}>
<p><strong>FileID:</strong> {item.FileID}</p>
<p><strong>Name:</strong> {item.Name}</p>
<p><strong>Actions:</strong> {item.Actions ? '启用' : '禁用'}</p>
<button
onClick={() => handleActionToggleWithFindIndex(item.FileID)}
style={{
backgroundColor: item.Actions ? '#4CAF50' : '#f44336',
color: 'white',
padding: '8px 15px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '14px',
}}
>
{item.Actions ? '点击禁用' : '点击启用'}
</button>
</div>
))}
</div>
);
}
export default DataUpdaterWithFindIndex;这两种方法都遵循了不可变性原则，因为它们都创建了新的数组引用。map方法更简洁，尤其适用于需要对数组中所有元素进行转换或部分修改的场景；findIndex方法则在需要精确找到并修改单个元素时同样有效。
注意事项
- 浅拷贝与深拷贝: 上述方法使用了浅拷贝。[...items]创建了数组的新引用，但数组内部的对象仍然是原始对象的引用。{ ...item, Actions: !item.Actions }创建了对象的新引用，但如果对象内部还有嵌套对象，那些嵌套对象仍然是原始引用。对于嵌套更深的对象，如果修改的是嵌套对象内部的属性，则需要进行深拷贝以确保所有层级的不可变性。在大多数情况下，对于简单的属性修改，浅拷贝已经足够。
- 性能考量: 对于非常庞大的数组，频繁地创建完整副本可能会有性能开销。在这种情况下，可以考虑使用像Immer.js这样的库来简化不可变更新的逻辑，它允许您像直接修改一样编写代码，但在内部会处理不可变更新。
- 键（key）的重要性: 在渲染列表时，为每个列表项提供一个唯一的key属性至关重要，这有助于React高效地识别哪些项发生了变化、添加或删除，从而优化渲染性能。在我们的示例中，item.FileID被用作key。
总结
在React中更新数组中对象的属性，核心在于理解并实践不可变性原则。通过将数据存储在组件状态中，并在每次更新时创建新的数据副本（包括数组和被修改的对象），您可以确保UI能够正确响应数据变化，同时避免"read only"等错误。掌握这一模式是编写健壮、可维护React应用的关键。
