React中如何用Hook编辑对象内isikolom数组的元素？

要修改嵌套在对象里的数组元素，必须遵循React的不可变状态原则——不能直接修改原状态对象，要逐层创建副本后再更新。以下是针对你的状态结构的具体实现方案：

核心修改函数实现 #

这个函数通过员工的nomorKaryawan（唯一标识）定位目标，更新指定字段：

const updateStaff = (targetNomorKaryawan, updatedFields) => {
  setStaffData(prevStaffData => {
    // 1. 复制外层状态对象
    const newStaffData = {...prevStaffData};
    // 2. 复制"Uncatagorize"分类的对象
    const updatedCategory = {...newStaffData["Uncatagorize"]};
    // 3. 映射isikolom数组，找到目标员工并创建新对象
    updatedCategory.isikolom = updatedCategory.isikolom.map(staff => {
      if (staff.nomorKaryawan === targetNomorKaryawan) {
        // 合并原数据与更新字段，生成新员工对象
        return {...staff, ...updatedFields};
      }
      // 非目标员工直接返回原对象
      return staff;
    });
    // 4. 将更新后的分类放回新状态对象
    newStaffData["Uncatagorize"] = updatedCategory;
    return newStaffData;
  });
};

调用示例 #

比如要修改Evan Jovian的年龄和城市：

updateStaff("2301873560", { usia: "22", kota: "Jakarta" });

可选：添加TypeScript类型定义（更安全） #

你的状态用了useState<Object>，可以定义更具体的类型避免类型错误：

// 定义员工类型
interface Staff {
  nama: string;
  usia: string;
  alamat: string;
  kota: string;
  telepon: string;
  nomorKaryawan: string;
}

// 定义分类类型
interface StaffCategory {
  namakolom: string;
  isikolom: Staff[];
}

// 初始化状态时指定类型
const [staffData, setStaffData] = useState<Record<string, StaffCategory>>({
  ["Uncatagorize"]: {
    namakolom: "Uncatagorize",
    isikolom: [
      {
        nama: "Evan Jovian",
        usia: "21",
        alamat: "Jln.Pontianak III no.32",
        kota: "Bandung",
        telepon: "082125439087",
        nomorKaryawan: "2301873560",
      },
      {
        nama: "Japri Supriyanto",
        usia: "31",
        alamat: "Jln.Kebon teh no.32",
        kota: "Bogor",
        telepon: "088172736464",
        nomorKaryawan: "2301873561",
      },
    ],
  }
});

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