React如何更新对象属性？实现单篇博客点赞自增并同步状态

实现的核心要求是严格遵守React状态的不可变更新规则：全程不修改原blogs数组、不直接修改数组内的博客对象引用，通过生成全新的状态值触发组件重渲染，避免出现状态变了但视图不更新的问题。

实现步骤 #

• 生成点赞更新后的单篇博客对象：保留原博客的所有字段属性，仅将likes字段在原有值基础上加1，不直接修改传入的原博客对象
• 基于原blogs数组生成全新的列表：通过数组遍历匹配当前要更新的博客id，命中匹配规则就替换为刚才生成的更新后博客对象，未匹配的条目保留原有引用不变
• 调用setBlogs将全新生成的博客列表作为新状态回写，完成组件状态同步

完整可运行的函数实现 #

const incLikes = blog => {
  // 构造更新后的单篇博客对象
  const updatedBlog = {
    ...blog,
    likes: blog.likes + 1
  }

  // 生成全新的博客列表数组
  const updatedBlogs = blogs.map(item => 
    item.id === blog.id ? updatedBlog : item
  )

  // 回写状态
  setBlogs(updatedBlogs)
}

常见错误写法规避 #

以下写法因为直接修改了原状态的对象/数组引用，会导致React浅比较检测不到状态变化，无法触发视图更新，实际开发中需要避免：

// 错误写法1：直接修改传入的原博客对象属性
blog.likes = blog.likes + 1
setBlogs([...blogs])

// 错误写法2：直接修改原数组内的对象属性
const targetIndex = blogs.findIndex(item => item.id === blog.id)
blogs[targetIndex].likes += 1
setBlogs(blogs)

如果后续需要把点赞数据同步到后端，可以在这个逻辑的基础上追加对应接口调用，比如调用blogsService.update(blog.id, updatedBlog)发起PUT请求，不影响当前本地状态更新的核心逻辑。

内容的提问来源于stack exchange，提问作者notreddituser