如何在 JavaScript 中更改数组内的嵌套对象值？

Question

当用户单击删除按钮时，我正在使用 react 来更改状态。基本上是一个嵌套对象在一个数组内的另一个嵌套对象中

const data = [
  {
    id: 2,
    adminId: 2,
    roleId: 1,
    storeId: 1,
    createdAt: "2021-08-26T16:57:49.000Z",
    updatedAt: "2021-08-26T16:57:49.000Z",
    user: {
      id: 2,
      empId: 0,
      firstName: "Test1",
      lastName: "Test2",
      email: "test@test3.com",
      phone: "0900-786013",
      password: "$2b$10$XPxzZuzKLSl3Rm9YVk7AheZfLbvTNVV0jmo.NR/b0IJuFejW/hCFa",
      isActive: true,
      isDeleted: false,
      createdAt: "2021-08-26T16:57:49.000Z",
      updatedAt: "2021-08-30T07:34:38.000Z",
    },
  },
];

当用户单击删除按钮时，isDeleted 值应该为 true。到目前为止，我已经尝试使用地图和过滤器进行地图。

setStaff(
           data.map((item) => {
                return item.id === id
                  ? { ...item, item: (item.user.isDeleted = true) }
                  : item;
          })

Answer 1

在这里试试这个。

setStaff(
       data.map((item) => {
            return item.id === id
              ? { ...item, user: {...item.user, isDeleted: true} }
              : item;
      })

Answer 2

当您执行item.user.isDeleted = true 时，您正在直接修改您的状态，这不是您应该在 React 中更新状态的方式。相反，您可以将新对象中的user 键设置为包含来自item.user 对象的相同键，方法是将该（...item.user）传播到一个新对象中，然后将isDeleted 属性覆盖为true：

setStaff(data.map((item) => {
  return item.id === id
    ? { ...item, user: {...item.user, isDeleted: true }
    : item;
});