如何使用数组删除对象内部的对象？(React.js缩减器)

Question

数据示例(useContext)

data: { 
  projects:{
    'project-1':{
      name: 'project-1',
      columnIds:['column-1', 'column-2'],
    },
    'project-2':{
      name: 'project-2',
      columnIds:['column-3'],
    },

  },
  columns:{
    'column-1':{
      title: 'column-1',
      content: 'abc',
    },
    'column-2':{
      title: 'column-2',
      content: 'def',
    },
    'column-3':{
      title: 'column-3',
      content: 'ghi',
    },
  },
}

如果我删除了包含column-1和column-2的project-1，那么它也应该在columns对象中被删除。所以结果应该是：

data: {
  projects:{
    'project-2':{
      name: 'project-2',
      columnIds:['column-3'],
    },

  },
  columns:{
    'column-3':{
      title: 'column-3',
      content: 'ghi',
    },
  },
}

我已经知道如何删除project-1对象，但我被困在删除column-1和column-2上。

这是我删除column-1和``column 2数据的代码：

let newColumn = data.projects[projectname].columnIds.map((item) =>
  Object.keys(data.columns).filter((key) => key !== item)
);

Answer 1

删除属性前，只需检查是否有对应的列ID即可。如果有，则遍历If并删除列：

​

const data = {
  projects: {
    'project-1': {
      name: 'project-1',
      columnIds: ['column-1', 'column-2'],
    },
    'project-2': {
      name: 'project-2',
      columnIds: ['column-3'],
    },

  },
  columns: {
    'column-1': {
      title: 'column-1',
      content: 'abc',
    },
    'column-2': {
      title: 'column-2',
      content: 'def',
    },
    'column-3': {
      title: 'column-3',
      content: 'ghi',
    },
  },
}
const key = 'project-1'
const { columnIds } = data.projects[key]
if (columnIds.length > 0) {
  columnIds.forEach(id => {
    delete data.columns[id]
  })
}
delete data.projects[key]

console.log(data)

​

您还可以创建对象的副本，这样就不会改变原始对象：

​

const data = {
  projects: {
    'project-1': {
      name: 'project-1',
      columnIds: ['column-1', 'column-2'],
    },
    'project-2': {
      name: 'project-2',
      columnIds: ['column-3'],
    },

  },
  columns: {
    'column-1': {
      title: 'column-1',
      content: 'abc',
    },
    'column-2': {
      title: 'column-2',
      content: 'def',
    },
    'column-3': {
      title: 'column-3',
      content: 'ghi',
    },
  },
}

function deleteColumns(obj, key) {
  const copy = {
    projects: { ...obj.projects },
    columns: { ...obj.columns }
  }
  const { columnIds } = copy.projects[key]
  if (columnIds.length > 0) {
    columnIds.forEach(id => delete copy.columns[id])
  }
  delete copy.projects[key]
  return copy
}

const afterDelete = deleteColumns(data, 'project-1')

console.log(afterDelete)
console.log(data)

​