反应 - 使用键名从父 object 中删除子 object

Question

我正在尝试从父 object 中过滤掉不需要的对象
但是我被抛出一个TypeError: Cannot delete property 'children' of #<Object>

像这样传递的道具：

<Column df={["between", "mt-0", "around"]} xl={["center"]}>...</Column>

给一个实用程序 function 像这样：

const Column = props => {
  const x = filterComponentProps(props)
  return stuff
}

实用程序 function 内部的任何 object 在const condition = ["df", "xl"]中不匹配的内容都将被删除。

export const filterComponentProps = props => {
  let data = props
  console.log(data) 
  // {df: Array(3), xl: Array(1), children: Array(6)}
  // children: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
  // df: (3) ["between", "mt-0", "around"]
  // xl: ["center"]

  const condition = ["df", "xl"]
  Object.keys(data).forEach(key =>
    !condition.includes(key) ? delete data[key] : key
  ) //ERROR 
  return data
}

我设置了一个测试，看看它是否与 function 有问题，但它按预期工作：

const data = {
  df: { name: "Part 1", size: "20", qty: "50" },
  xl: { name: "Part 2", size: "15", qty: "60" },
  children: { name: "Part 2", size: "15", qty: "120" },
}

const condition = ["df", "xl"]

Object.keys(data).forEach(key =>
  !condition.includes(key) ? delete data[key] : key
)

console.log(data)
//{df: {…}, xl: {…}}
//df: {name: "Part 1", size: "20", qty: "50"}
//xl: {name: "Part 2", size: "15", qty: "60"}

Answer 1

您收到此错误是因为您尝试修改已冻结的 object。 如果您尝试以下操作

const data = Object.freeze({
  df: { name: "Part 1", size: "20", qty: "50" },
  xl: { name: "Part 2", size: "15", qty: "60" },
  children: { name: "Part 2", size: "15", qty: "120" },
})

你得到同样的错误。 让我知道是否清楚。

Answer 2

像这样解构道具，

let data = {...props};

创建道具的浅表副本，现在循环数据并删除您想要的属性，

export const filterComponentProps = props => {
  let data = {...props};     // shallow copy
  const condition = ["df", "xl"]
  Object.keys(data).forEach(key =>
    !condition.includes(key) ? delete data[key] : key
  )
  return data;
}

试试这个，它会工作。