在 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, },];// 错误的尝试
上述代码尝试直接修改 Data 数组中第一个对象的 Actions 属性。这会导致两个问题：
“Cannot assign to read only property”错误：如果 Data 数组或其内部对象被冻结，或者在某些 JavaScript 环境下，直接修改会抛出此错误。UI 不会更新：即使没有抛出错误，由于 Data 数组的引用没有改变，React 也不会认为状态已更新，因此不会重新渲染组件来反映 Actions 值的变化。
正确的更新方式：利用 useState 和不可变性
在 React 函数组件中，我们使用 useState Hook 来管理状态。要正确更新数组中对象的属性，需要执行以下步骤：
将数据存储在组件状态中：使用 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 ( 数据列表
{dataList.map((item) => ( FileID: {item.FileID}, Name: {item.Name}, Actions: {item.Actions ? 'Enabled' : 'Disabled'} ))} );}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' // 更新嵌套属性 }};
性能考虑：对于非常大的数组或频繁的状态更新，频繁地创建数组和对象的副本可能会带来一定的性能开销。在这种情况下，可以考虑使用专门的不可变数据结构库，如 Immer.js，它允许你以“可变”的方式编写代码，但在底层会自动处理不可变更新，从而简化代码并优化性能。状态提升：在更复杂的应用中，如果多个组件需要访问或修改相同的数据，你可能需要将状态提升到它们的共同父组件，并通过 props 传递数据和更新函数。
总结
在 React 中更新数组中对象的属性，核心在于理解并实践不可变性原则。避免直接修改原始状态，而是通过创建数据副本，在新副本上进行修改，然后使用 useState 的更新函数来替换旧状态。这种模式不仅能避免“read-only”错误，更能确保 React 能够正确地检测到状态变化并触发 UI 重新渲染，从而构建出稳定、可预测且易于维护的应用程序。
以上就是在 React 中安全地更新数组中对象的属性值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589293.html
微信扫一扫 
支付宝扫一扫 
