Object & Array State 对象与数组状态
最后更新：2026-10-28
Object & Array State 对象与数组状态
state 必须替换成「新对象 / 新数组」才能触发更新：改对象用展开运算符覆盖字段，改数组用展开、map、filter 创建新数组。直接原地修改，React 察觉不到变化，界面不会更新。
| 分组 | 渲染与状态 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 16.8 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
setUser({ ...user, name: '新名字' }) // 对象：展开覆盖
setList([...list, newItem]) // 数组：展开追加
setList(list.filter((x) => x.id !== id)) // 数组：filter 删除返回值：无返回值，作为编码约定/心智模型使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
显示姓名「小明」与标签「React」；点改名按钮变成「大明」，点加标签按钮每按一次追加一个「Hooks」标签——所有更新都通过创建新对象完成。💡 要点
⚠️ 注意 user.name = 'x' 或 user.tags.push(...) 不会触发重渲染：改的是同一个引用，React 以为什么都没变。
💡 提示 嵌套对象要逐层展开：setUser({ ...u, addr: { ...u.addr, city: '上海' } })，别只展开外层。
ℹ️ 说明 结构尽量扁平、状态尽量独立，能大幅减少「逐层展开新对象」的样板代码。
🏷️ 渲染与状态相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 为什么修改对象 state 页面不更新？
A React 用 Object.is 比较前后引用：原地修改引用不变就被判定「没变」。必须用展开运算符创建新对象再 setState。
Q 怎么正确更新嵌套对象状态？
A 从被改的那层到最外层逐层展开：setUser({ ...user, addr: { ...user.addr, city: '上海' } })，保持所有旧引用不变。
Q 数组状态怎么添加和删除元素？
A 添加用 [...list, item]（尾插）或 [item, ...list]（头插）；删除用 filter((x) => x.id !== id)；都返回新数组。
