使用 React 的 useState 修改数组中元素的状态
2020-08-20 16:48:14
在 React 中，使用 useState 修改数组中元素的状态需遵循不可变性原则，即不直接修改原数组或对象，而是创建新实例触发重新渲染。以下是具体方法、示例及注意事项：
一、基础方法：更新单个元素假设初始状态为包含多个对象的数组，需修改某个元素的属性（如将 data[0].score 改为 "Good"）：
import React, { useState } from 'react';function MyComponent() { const [data, setData] = useState([ { id: "a1", score: "", name: "MyA1" }, { id: "a2", score: "", name: "MyA2" } ]); const updateList = () => { setData(previousState => [ { ...previousState[0], score: 'Good' }, // 创建新对象覆盖目标元素 ...previousState.slice(1) // 保留其他元素 ]); }; return ( <div> {data.map(item => ( <div key={item.id}>{item.name}: {item.score}</div> ))} <button onClick={updateList}>Update Score</button> </div> );}关键点：
- 函数式更新：setData(previousState => ...) 确保基于最新状态更新，避免闭包问题。
- 对象展开运算符：{ ...previousState[0], score: 'Good' } 创建新对象，保留原属性并覆盖目标属性。
- 数组展开与 slice：...previousState.slice(1) 生成除目标元素外的新数组，合并后形成完整新数组。
若需根据条件修改多个元素（如按 id 更新 score）：
const updateList = (id, newScore) => { setData(previousState => previousState.map(item => item.id === id ? { ...item, score: newScore } : item ) );};逻辑说明：
- 遍历数组，检查每个元素的 id。
- 匹配时创建新对象并更新属性，否则返回原对象。
- map 自动生成新数组，无需手动拼接。
不可变性
直接修改原数组（如 push、splice）或对象（如直接赋值属性）不会触发渲染。
错误示例：// ❌ 错误：直接修改原对象const wrongUpdate = () => { const newData = [...data]; newData[0].score = 'Good'; // 仍修改了原对象属性 setData(newData);};
函数式更新
当新状态依赖旧状态时（如计数器递增），必须使用函数式更新：setCount(prevCount => prevCount + 1);
性能优化
大型数组：频繁更新可能导致性能问题，可结合 useMemo 缓存渲染结果或使用 useReducer 管理复杂逻辑。
唯一 key：渲染列表时，为每个元素提供稳定且唯一的 key（如 id），帮助 React 高效更新 DOM。
深层嵌套结构
若数组元素为深层嵌套对象，需递归复制或使用库（如 Immer）简化操作：import { produce } from 'immer';setData(produce(draft => { draft[0].score = 'Good'; // 直接修改草稿对象，Immer 处理不可变性}));
- 核心原则：通过创建新对象/数组更新状态，避免直接修改原数据。
- 推荐模式：
单元素更新：对象展开 + 数组拼接。
条件更新：map 方法遍历生成新数组。
- 扩展工具：复杂场景可引入 Immer 或 useReducer 简化代码。
掌握这些方法后，可安全高效地管理 React 中的数组状态，确保应用逻辑正确且性能优化。
热门标签
