React中如何使用useState仅更新对象中的指定属性且保留其他属性不变？

在React里，状态是不可变的，咱们不能直接修改原状态对象里的course.comments数组，得先创建一个完整的状态副本，再在副本上修改，最后用setState更新。下面给你两种实用的写法，都能保证不改动其他属性：

方法一：使用展开运算符（最直观的原生写法） #

假设你的状态变量是data，更新函数是setData，要添加的新评论对象是newComment：

import { useState } from 'react';

function YourComponent() {
  // 初始化状态
  const [data, setData] = useState({
    course: { price: 100, promotion: null, comments: [] },
    userIDs: [1, 2],
    usersNumber: 2
  });

  // 定义要添加的新评论
  const newComment = { id: 1, content: "这门课干货满满！", author: "小明" };

  // 添加评论的函数
  const addComment = () => {
    setData(prevData => ({
      // 拷贝外层所有属性，保证userIDs、usersNumber不变
      ...prevData,
      // 单独处理course对象，拷贝它的所有原有属性
      course: {
        ...prevData.course,
        // 更新comments数组：拷贝原数组，再追加新评论
        comments: [...prevData.course.comments, newComment]
      }
    }));
  };

  return (
    <button onClick={addComment}>添加评论</button>
  );
}

方法二：使用Immer库（简化深层嵌套更新） #

如果你的状态嵌套层级很深，手动写展开运算符会很繁琐，推荐用Immer库——它允许你“直接修改”草稿状态，底层自动帮你处理不可变性：
首先安装Immer：

npm install immer

然后用useImmer替代原生useState：

import { useImmer } from 'immer';

function YourComponent() {
  const [data, setData] = useImmer({
    course: { price: 100, promotion: null, comments: [] },
    userIDs: [1, 2],
    usersNumber: 2
  });

  const addComment = () => {
    setData(draft => {
      // 直接操作草稿对象的comments数组，Immer会自动生成不可变的新状态
      draft.course.comments.push({ id: 1, content: "这门课干货满满！", author: "小明" });
    });
  };

  return (
    <button onClick={addComment}>添加评论</button>
  );
}

关键注意事项 #

• 一定要用函数式更新（setData(prevData => ...)），这样能确保你拿到的是最新的状态值，避免因状态异步更新导致的错误。
• 绝对不能直接修改原状态（比如data.course.comments.push(newComment)），这会违反React的不可变原则，导致组件无法正常重新渲染。

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