时间戳

首页 > 解决方案 > React - 使用键名从父对象中删除子对象

javascript - React - 使用键名从父对象中删除子对象

问题描述

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


像这样传递的道具：

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

给定一个像这样的效用函数：

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

实用功能内部对象中不匹配的任何内容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
}

我设置了一个测试，看看它是否是函数的问题，但它按预期工作：

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"}

标签： javascriptreactjsreact-native

解决方案

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

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" },
})

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

推荐阅读