本文详细阐述了在react应用中如何正确更新数组内对象的属性值。针对直接修改导致“cannot assign to read only Property”错误的问题，教程强调了使用react状态管理（`usestate`）的重要性。通过复制现有状态、修改副本并更新状态的不可变模式，确保数据更新能够触发ui重绘，从而避免了直接修改带来的常见问题，并保持了组件的可预测性。
在React开发中，当我们需要更新组件中展示的数据时，尤其是一个包含多个对象的数组，直接修改这些对象的属性常常会遇到“Cannot assign to read only property”的错误。这不仅是因为数据可能被设置为只读，更重要的是，直接修改（mutating）原始数据不符合React的状态管理原则，也无法触发组件的重新渲染。本教程将深入探讨这一问题，并提供在React中安全、高效地更新数组中对象属性的正确方法。
理解“Cannot assign to read only property”错误
当你尝试直接修改一个可能来自组件 props 或通过其他方式传递的、被视为不可变的数据时，javaScript引擎或React内部机制会抛出此错误。在React中，组件的 props 是只读的，状态（state）虽然可以更新，但其更新过程应遵循不可变性原则。直接修改一个数组或对象，即使它被存储在 state 中，也可能导致以下问题：
- 无法触发重新渲染： React通过比较新旧状态的引用来判断是否需要重新渲染组件。如果你直接修改了 state 中的一个对象或数组，其引用地址并未改变，React可能认为状态没有变化，从而跳过重新渲染，导致UI与数据不一致。
- 副作用与调试困难： 直接修改原始数据可能导致意想不到的副作用，尤其是在数据被多个组件共享时，使得应用的行为难以预测和调试。
- 违反不可变性原则： 不可变性是函数式编程和React状态管理的核心原则之一。它要求任何数据修改都应通过创建新的数据副本来完成，而不是直接修改原有数据。
React中更新数组对象属性的正确姿势
在React中，要正确更新存储在数组中的对象属性，核心思想是：不要直接修改原始数据，而是创建数据的副本，在副本上进行修改，然后用修改后的副本更新组件的状态。 这通常通过 useState Hook 来实现。
以下是实现这一目标的通用步骤：
步骤一：将数据存储在组件状态中
首先，确保你想要更新的数据是通过 useState Hook 管理的组件状态。
import React, { useState } from 'react'; const initialData = [ { 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, }, ]; function MyComponent() { const [items, setItems] = useState(initialData); // ... 其他组件逻辑 }
步骤二：创建状态的副本并修改
当需要更新某个对象的属性时，你需要创建一个新的数组副本，并在副本中找到目标对象，然后创建目标对象的新副本并修改其属性。这样可以确保整个数据流的不可变性。
有两种常见的方法来完成这一步：
-
使用 findIndex 和展开运算符： 这种方法首先找到目标对象的索引，然后创建数组副本，再在副本中替换掉旧对象。
const handleActionChange = (fileIDToUpdate) => { const index = items.findIndex(item => item.FileID === fileIDToUpdate); if (index > -1) { const updatedItems = [...items]; // 创建数组副本 // 创建目标对象的新副本并修改其属性，然后替换掉旧对象 updatedItems[index] = { ...updatedItems[index], Actions: false }; // ... } // ... };这两种方法都确保了最终 updatedItems 是一个全新的数组，并且其中被修改的对象也是全新的对象引用。
步骤三：使用setter函数更新状态
最后，使用 useState 返回的 setter 函数（在本例中是 setItems）来更新组件的状态。这将触发React的重新渲染机制，使UI反映最新的数据。
// 承接步骤二的示例代码 setItems(updatedItems); // 更新状态，触发组件重新渲染
完整示例代码
结合上述步骤，一个完整的React组件示例如下：
import React, { useState } from 'react'; import ReactDOM from 'react-dom'; // 初始数据，通常在实际应用中可能来自API或父组件props const initialData = [ { 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, }, ]; function DataManagementComponent() { // 使用useState管理数据列表 const [items, setItems] = useState(initialData); /** * 处理操作按钮点击事件，更新指定FileID的Actions属性 * @param {number} fileIDToUpdate 需要更新的文件的ID */ const handleActionChange = (fileIDToUpdate) => { // 1. 创建当前状态数组的副本，并在此过程中修改目标对象 const updatedItems = items.map(item => { // 2. 找到需要更新的对象，并创建一个新对象以修改其Actions属性 if (item.FileID === fileIDToUpdate) { // 返回一个新对象，其Actions属性设置为false，其他属性不变 return { ...item, Actions: false }; } // 其他对象保持不变，直接返回原对象 return item; }); // 3. 使用setter函数更新状态，这将触发组件的重新渲染 setItems(updatedItems); }; return ( <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}> <h1>文件操作管理</h1> <ul style={{ listStyle: 'none', padding: 0 }}> {items.map((item) => ( <li key={item.FileID} style={{ marginBottom: '10px', border: '1px solid #eee', padding: '10px', borderRadius: '5px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> <div> <span style={{ fontWeight: 'bold' }}>文件ID:</span> {item.FileID}, <span style={{ fontWeight: 'bold' }}>姓名:</span> {item.Name}, <span style={{ fontWeight: 'bold' }}>操作状态:</span> {item.Actions ? '启用' : '禁用'} </div> <button disabled={!item.Actions} // 按钮禁用状态取决于Actions属性 onClick={() => handleActionChange(item.FileID)} style={{ marginLeft: '15px', padding: '8px 15px', backgroundColor: item.Actions ? '#dc3545' : '#6c757d', // 红色表示可禁用，灰色表示已禁用 color: 'white', border: 'none', borderRadius: '5px', cursor: item.Actions ? 'pointer' : 'not-allowed', fontSize: '0.9em' }} > {item.Actions ? `禁用 ${item.Name} 的操作` : `已禁用`} </button> </li> ))} </ul> <h2 style={{ marginTop: '30px', borderTop: '1px solid #eee', paddingTop: '20px' }}>当前数据状态 (jsON)</h2> <pre style={{ backgroundColor: '#f8f8f8', padding: '15px', borderRadius: '5px', overflowX: 'auto' }}> <code>{json.stringify(items, null, 2)}</code> </pre> </div> ); } // 将组件渲染到DOM中 const rootElement = document.getElementById('root'); ReactDOM.render(<DataManagementComponent />, rootElement);
注意事项
- 不可变性原则： 始终坚持不可变性原则。这意味着任何时候修改数组或对象时，都应创建其副本。这不仅适用于数组和对象本身，也适用于数组中的对象。
- 深拷贝与浅拷贝： 上述示例使用的是浅拷贝（… 展开运算符）。如果你的数组中的对象包含嵌套的对象或数组，并且你需要修改这些嵌套结构，那么你可能需要进行深拷贝（例如使用 JSON.parse(JSON.stringify(obj)) 或专门的深拷贝库如 lodash.cloneDeep）来确保所有层级的不可变性。
- 性能优化： 对于包含大量数据或频繁更新的数组，map 或 findIndex 的操作可能会有性能开销。在这些情况下，可以考虑使用 React.memo、useMemo 或 useCallback 来优化组件的渲染性能，避免不必要的重新渲染。
- 状态提升： 如果数据需要在多个组件之间共享或由更高级别的组件管理，考虑将状态提升到共同的父组件，并通过 props 传递数据和更新函数。
总结
在React中更新数组中对象的属性，核心在于遵循不可变性原则和正确利用 useState Hook。通过创建数据副本，在副本上进行修改，然后用新的副本更新状态，我们不仅能避免“Cannot assign to read only property”的错误，还能确保UI的正确更新，并维护代码的可预测性和可维护性。理解并实践这些原则，是成为一名高效React开发者的关键。