渐进式编程课
React 目录
第 14 课2026.09.17

不可变地更新一条课程记录。

第 14 课:按id更新数组状态

  • 日期:2026-09-17
  • 课程序号:第 14 课
  • 知识点:按id更新数组状态

用途

不可变地更新一条课程记录。

核心概念

map 返回新数组;目标 id 返回展开后的新对象,其余项保持原引用。

最小代码或操作示例

text
setLessons(items => items.map(item =>
  item.id === id ? { ...item, done: true } : item
))

3~5 分钟练习

把 done 改为取反。

参考答案

{ ...item, done: !item.done }

与上一课的联系

继承上一课的按 id 删除;本课只增加按 id 更新;下一课可提取列表项组件。

时效校验

时效校验:2026-09-17(React 当前官方指南)。已打开并核对下列官方资料;未发现本课主方案存在废弃标记。

官方参考