React中如何向对象内部的数组推送元素？

嘿，我来帮你解决这个问题！你现在遇到的核心问题是没遵循React状态的不可变性原则，直接赋值覆盖了数组，而且push的用法也没结合状态更新的正确姿势。

先拆解下你当前代码的问题：

• list[index]['addedCertificates'] = list[index]['selectedCertificate']这行是把单个值直接替换了整个数组，自然会覆盖之前的内容；
• 你尝试的push虽然能修改数组，但因为list是shiftList的浅拷贝，里面的对象还是原状态的引用，直接修改会污染原状态，而且React可能因为没检测到引用变化，不触发重新渲染；另外你后面的console.log看不到最新状态，是因为setShiftList是异步的，立刻打印拿的还是旧值。

下面给你两种正确的写法，都严格遵循不可变性原则：

方法一：使用函数式更新（推荐，更安全） #

这种方式能确保你拿到最新的状态，避免异步更新带来的状态不一致问题：

const addCertificate = (index) => {
  setShiftList(prevShiftList => {
    // 获取要修改的那一项shift
    const currentShift = prevShiftList[index];
    // 返回全新的数组，替换对应位置的shift对象
    return [
      ...prevShiftList.slice(0, index), // 保留index之前的项
      {
        ...currentShift, // 复制原shift的所有属性
        // 创建新的addedCertificates数组：原数组元素 + 选中的证书
        addedCertificates: [...currentShift.addedCertificates, currentShift.selectedCertificate],
        // 可选：如果添加后要清空选中的证书，可以加上这行
        // selectedCertificate: ''
      },
      ...prevShiftList.slice(index + 1) // 保留index之后的项
    ];
  });
};

方法二：先创建多层副本再更新 #

如果你习惯先拷贝数组再修改，记得要把嵌套的对象也一起拷贝，避免修改原状态：

const addCertificate = (index) => {
  // 先拷贝整个shiftList数组
  const updatedList = [...shiftList];
  // 再拷贝要修改的那个shift对象（关键！不然还是修改原对象）
  const updatedShift = { ...updatedList[index] };
  // 创建新的addedCertificates数组，加入新元素
  updatedShift.addedCertificates = [...updatedShift.addedCertificates, updatedShift.selectedCertificate];
  // 把更新后的shift对象放回数组
  updatedList[index] = updatedShift;
  // 更新状态
  setShiftList(updatedList);
};

关于console.log的小提示 #

你现在的console.log('shiftList from add certificate', shiftList)看不到最新状态，是因为setShiftList是异步的。如果要查看更新后的状态，可以用useEffect监听：

import { useEffect } from 'react';

// 放在组件内部
useEffect(() => {
  console.log('更新后的shiftList:', shiftList);
}, [shiftList]); // 当shiftList变化时触发

总结一下核心要点：

• React状态是不可变的，永远不要直接修改原状态里的对象或数组，必须创建新的副本
• 函数式更新更适合处理依赖当前状态的更新场景
• 不要用单个值覆盖数组，而是通过扩展运算符...创建包含原有元素的新数组

备注：内容来源于stack exchange，提问作者Spartis