Как удалить объект в массиве, который является вложенным объектом

Question

У меня есть таблица с данными:

Когда я нажимаю кнопку удаления, я знаю индекс и идентификатор пользователя, у которого есть эти данные. Я хотел бы удалить этот объект из массива "timeRecords" и вернуть "employeeList" без него.

Я пытался реализовать эту функцию, но безрезультатно

//recordId = index and key also, userID = userId who have this records.
  deleteRecord = (recordID, userID) => {  
    console.log(`usunięto rekord: ${recordID}, na użytkowniku o ID: ${userID}`);
    let employeesList = this.state.employeesList;
    employeesList = employeesList.filter(el => {
      if (el.id === userID) {
        if (el.timeRecords !== recordID) {
          return el.timeRecords;
        }
      }
    });
  };

Answer 1

Вы можете использовать .map() и вложенный .filter(), как это, чтобы удалить идентифицированный объект. .Map () используется для перебора объектов сотрудника. Как только сотрудник с совпадающим идентификатором найден, мы затем выполняем итерацию его timeRecords, чтобы отфильтровать тот, который мы хотим удалить:

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 array = [{id: 1, timeRecords: [{id: 5, hours: 2}, {id: 6, hours: 3}]}, {id: 2, timeRecords: [{id: 7, hours: 2}, {id: 8, hours: 3}]}]

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

deleteRecords(5, 1)

Answer 2

Итак, вы хотите удалить определенную временную запись из определенного пользователя, верно? Вы можете отобразить пользователей, если идентификатор не совпадает, вы можете немедленно превратить этого пользователя, если они совпадают, вы можете отфильтровать временные записи и обновить пользователя с помощью этого.

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 };
  });
};

Answer 3

[{
  accountNumber: "1111111",
  id: 1,
  timeRecords: [{
    id: 0,
    hours: '1'
  }, {
    id: 1,
    hours: '2'
  }, {
    id: 2,
    hours: '3'
  }]
}]

решение может выглядеть чрезмерно сложным, но это правильный способ мутировать

deleteRecord = (recordID, userID) => {  
    const list = this.state.employeesList;
    const index = list(v => v.id === userID)
    const nestedList = list[index].timeRecords
    const nestedIndex = nestedList.findIndex(v => v.id === recordID)
    return [
      ...list.slice(0, index), // get items before the userID
      {
        ...list[index], // fill other pros of userID
        timeRecords: [ // remove item by recordID
          ...nestedList.slice(0, nestedIndex),
          ...nestedList.slice(nestedIndex + 1)
        ]
      },
      ...list.slice(index + 1) // get items after the userID
    ]
  }