本教程将深入探讨在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属性
当运行上述代码时，您可能会遇到以下错误信息：
Cannot assign to read only property 'Actions' of 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 ( 数据列表
{items.map((item) => ( FileID: {item.FileID}
Name: {item.Name}
Actions: {item.Actions ? '启用' : '禁用'}
))} );}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 ( 数据列表 (使用 findIndex)
{items.map((item) => ( FileID: {item.FileID}
Name: {item.Name}
Actions: {item.Actions ? '启用' : '禁用'}
))} );}export default DataUpdaterWithFindIndex;
这两种方法都遵循了不可变性原则，因为它们都创建了新的数组引用。map方法更简洁，尤其适用于需要对数组中所有元素进行转换或部分修改的场景；findIndex方法则在需要精确找到并修改单个元素时同样有效。
注意事项
浅拷贝与深拷贝: 上述方法使用了浅拷贝。[…items]创建了数组的新引用，但数组内部的对象仍然是原始对象的引用。{ …item, Actions: !item.Actions }创建了对象的新引用，但如果对象内部还有嵌套对象，那些嵌套对象仍然是原始引用。对于嵌套更深的对象，如果修改的是嵌套对象内部的属性，则需要进行深拷贝以确保所有层级的不可变性。在大多数情况下，对于简单的属性修改，浅拷贝已经足够。性能考量: 对于非常庞大的数组，频繁地创建完整副本可能会有性能开销。在这种情况下，可以考虑使用像Immer.js这样的库来简化不可变更新的逻辑，它允许您像直接修改一样编写代码，但在内部会处理不可变更新。键（key）的重要性: 在渲染列表时，为每个列表项提供一个唯一的key属性至关重要，这有助于React高效地识别哪些项发生了变化、添加或删除，从而优化渲染性能。在我们的示例中，item.FileID被用作key。
总结
在React中更新数组中对象的属性，核心在于理解并实践不可变性原则。通过将数据存储在组件状态中，并在每次更新时创建新的数据副本（包括数组和被修改的对象），您可以确保UI能够正确响应数据变化，同时避免”read only”等错误。掌握这一模式是编写健壮、可维护React应用的关键。
以上就是React中安全高效地更新数组中对象的属性值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589399.html
微信扫一扫 
支付宝扫一扫 
