Arrays 如何删除数组中嵌套对象的对象

我有一个数据表：

当我点击删除按钮时，我知道索引和用户ID是谁拥有这些数据。 我想从“timeRecords”数组中删除此对象，并返回“employeeList”，而不返回它

我尝试实现这个函数，但没有结果

//recordId=索引和键，userID=拥有此记录的用户id。
deleteRecord=（recordID，userID）=>{
log（`usunięto rekord:${recordID}，na użytkowniku o ID:${userID}`）；
让employeesList=this.state.employeesList；
employeesList=employeesList.filter（el=>{
如果（el.id==userID）{
if（el.timeRecords！==recordID）{
返回el.timeRecords；
}
}
});
};

您可以像这样使用

.map（）

和嵌套的

.filter（）

删除已识别的对象。.map（）用于迭代employee对象。找到具有匹配id的员工后，我们将迭代他们的时间记录，筛选出我们要删除的记录：

deleteRecords = (recordId, userId) => {
  const { employeesList } = this.state
  const newArr = employeesList.map((item) => {
    if(item.id == userId){
        return {
            ...item,
            timeRecords: item.timeRecords.filter((record) => record.id !== recordId)
        }
    } else {
        return item
    }
  })
}

运行下面的示例：

var数组=[{id:1，时间记录：[{id:5，小时数：2}，{id:6，小时数：3}]}，{id:2，时间记录：[{id:7，小时数：2}，{id:8，小时数：3}]
const deleteRecords=（记录ID，用户ID）=>{
const newArr=array.map（（项）=>{
if（item.id==userId）{
返回{
…项目，
timeRecords:item.timeRecords.filter（（record）=>record.id！==recordId）
}
}否则{
退货项目
}
})
console.log（newArr）
}
deleteRecords（5，1）

您可以像这样使用

.map（）

和嵌套的

.filter（）

来删除已识别的对象。.map（）用于迭代employee对象。找到具有匹配id的员工后，我们将迭代他们的时间记录，筛选出我们要删除的记录：

deleteRecords = (recordId, userId) => {
  const { employeesList } = this.state
  const newArr = employeesList.map((item) => {
    if(item.id == userId){
        return {
            ...item,
            timeRecords: item.timeRecords.filter((record) => record.id !== recordId)
        }
    } else {
        return item
    }
  })
}

运行下面的示例：

var数组=[{id:1，时间记录：[{id:5，小时数：2}，{id:6，小时数：3}]}，{id:2，时间记录：[{id:7，小时数：2}，{id:8，小时数：3}]
const deleteRecords=（记录ID，用户ID）=>{
const newArr=array.map（（项）=>{
if（item.id==userId）{
返回{
…项目，
timeRecords:item.timeRecords.filter（（record）=>record.id！==recordId）
}
}否则{
退货项目
}
})
console.log（newArr）
}
删除记录（5，1）

[{
账号：“1111111”，
id:1，
时间记录：[{
id:0，
小时数：“1”
}, {
id:1，
小时数：“2”
}, {
id:2，
小时数：“3”
}]
}]

解决方案，可能看起来过于工程化，但这是变异的正确方式

deleteRecord=（记录ID，用户ID）=>{
const list=this.state.employeesList；
const index=list（v=>v.id==userID）
const nestedList=list[index]。时间记录
const nestedIndex=nestedList.findIndex（v=>v.id==recordID）
返回[
…list.slice（0，索引），//在userID之前获取项
{
…列出[索引]，//填写用户ID的其他优点
timeRecords:[//按recordID删除项
…nestedList.slice（0，nestedIndex），
…nestedList.slice（nestedIndex+1）
]
},
…list.slice（index+1）//获取用户ID后面的项
]
}

[{
账号：“1111111”，
id:1，
时间记录：[{
id:0，
小时数：“1”
}, {
id:1，
小时数：“2”
}, {
id:2，
小时数：“3”
}]
}]

解决方案，可能看起来过于工程化，但这是变异的正确方式

deleteRecord=（记录ID，用户ID）=>{
const list=this.state.employeesList；
const index=list（v=>v.id==userID）
const nestedList=list[index]。时间记录
const nestedIndex=nestedList.findIndex（v=>v.id==recordID）
返回[
…list.slice（0，索引），//在userID之前获取项
{
…列出[索引]，//填写用户ID的其他优点
timeRecords:[//按recordID删除项
…nestedList.slice（0，nestedIndex），
…nestedList.slice（nestedIndex+1）
]
},
…list.slice（index+1）//获取用户ID后面的项
]
}

那么，您想从特定的用户权限中删除特定的时间记录吗？您可以映射用户，如果id不匹配，您可以立即启用此用户，如果他们匹配，则可以筛选时间记录并使用此更新用户

deleteRecord = (recordID, userID) => {
  return employeesList.map(employee => {
    if (employee.id !== userID) return employee;

    const timeRecords = employee.timeRecords.filter(
      timeRecord => timeRecord.id !== recordID
    );

    return { ...employee, timeRecords };
  });
};

---

那么，您想从特定的用户中删除特定的时间记录，对吗？您可以映射用户，如果id不匹配，您可以立即启用此用户，如果他们匹配，则可以筛选时间记录并使用此更新用户

deleteRecord = (recordID, userID) => {
  return employeesList.map(employee => {
    if (employee.id !== userID) return employee;

    const timeRecords = employee.timeRecords.filter(
      timeRecord => timeRecord.id !== recordID
    );

    return { ...employee, timeRecords };
  });
};

---

你能添加输入数组和需要删除的对象吗？我有两个输入：输入时间和数字。来自输入的值是connect with state，当您单击“添加”按钮时，您将创建一个对象{id:0，day:'2019-01-01'hours:8'}下一个是例如：{id:1，等等。}。必须删除的对象取决于单击的内容。主对象“employeeList”相同，但数据不同。请添加输入数组，并删除哪个对象？我有两个输入：输入时间和数字。来自输入的值是connect with state，当您单击“添加”按钮时，您将创建一个对象{id:0，day:'2019-01-01'hours:8'}下一个是例如：{id:1，等等。}。必须删除的对象取决于单击的内容。主要对象“employeeList”相同，但不同data@vicbyte有两个原因。1） 创建员工列表的新副本。2） 由于我们对每个员工进行迭代，因此更容易识别我们删除的时间表中的员工。起初我考虑只使用.filter（）->.filter（），但我认为逻辑没有那么清晰。@这是一个非常特殊的问题，在更新状态时需要一个全新的数组副本。如果我们在不创建新数组的情况下对现有状态值（即employeesList）进行任何突变，可能会导致一些意外的错误