Javascript TypeError:无法读取未定义的属性/TypeError:无法将未定义或null转换为对象

我有一个组件，它试图通过

map

覆盖数据并调用函数来呈现必要的组件，从而在

props

中将数据呈现为react引导卡

在用于React的Chrome开发工具中，这个数据（

props.data

）看起来像一个数组，但我现在意识到，在props中，它实际上是一个对象。为了处理这个问题，我使用

const values=Object.values（this.props.data）

然后稍后

{values.map（renderCard）}

。我已经把完整的组件代码放在这个问题的底部

数组（

const values

）具有以下结构：

[
  {
    "_id": {
      "$oid": "5f78532c82c81067eafdb896"
    },
    "card_id": "Was-Tre-2140",
    "brand": "National Treasures",
    "card_number": {
      "$numberDouble": "100"
    },
    "career_stage": "Veteran",
    "forTrade": "Yes",
    "image_path": "https://res.cloudinary.com/dkwmxhsem/image/upload/t_Card Resize/v1599758190/",
    "manufacturer": "Panini",
    "number": {
      "$numberDouble": "16"
    },
    "player": "Trent Williams",
    "print_run": {
      "$numberDouble": "25"
    },
    "purchase_date": "Thu Aug 20 00:00:00 GMT+01:00 2020",
    "series": "Century Materials",
    "status": "Own",
    "team": "Washington Football Team",
    "type": "Auto",
    "user": "jinky32@gmail.com",
    "variation": "Holo Silver",
    "year": "2010"
  },
  {
    "_id": {
      "$oid": "5f78533d82c81067eafdc06d"
    },
    "card_id": "Was-Ter-4383",
    "brand": "National Treasures",
    "card_number": {
      "$numberDouble": "187"
    },
    "career_stage": "Rookie Card",
    "forTrade": "",
    "image_path": "https://res.cloudinary.com/dkwmxhsem/image/upload/t_Card Resize/v1599758190/",
    "manufacturer": "Panini",
    "number": {
      "$numberDouble": "1"
    },
    "player": "Terry McLaurin",
    "print_run": {
      "$numberDouble": "10"
    },
    "purchase_date": "Sat Oct 03 00:00:00 GMT+01:00 2020",
    "series": "Rookie Autograph Patch",
    "status": "Own",
    "team": "Washington Football Team",
    "type": "RPA",
    "user": "jinky32@gmail.com",
    "variation": "Holo Gold",
    "year": "2019"
  }
]

在我尝试访问对象（例如）中的数据之前，所有内容都会正确地呈现到屏幕上

"card_number": {
      "$numberDouble": "229"
    },

这在“渲染函数”部分中完成：

<Card.Title>
  {card.player}(#
  {card.card_number.$numberDouble}) <---It blows up here!
</Card.Title>

我得到了错误

error:对象作为React子对象无效（找到：具有键{$numberDouble}的对象）。如果要呈现子对象集合，请改用数组。

所以我试着转换成数组，这在javascript中似乎是可行的

let值=[
{
“_id”：{
$oid:“5F7852C82C81067EAFDB896”
},
“卡号”：“Was-Tre-2140”，
“品牌”：“国宝”，
“卡号”：{
$numberDouble:“100”
},
“职业舞台”：“老兵”，
“forTrade”：“是”，
“图像路径”：https://res.cloudinary.com/dkwmxhsem/image/upload/t_Card 调整大小/v1599758190/“，
“制造商”：“帕尼尼”，
“编号”：{
$numberDouble:“16”
},
“玩家”：“特伦特·威廉姆斯”，
“打印运行”：{
$numberDouble:“25”
},
“购买日期”：“8月20日星期四00:00:00 GMT+2020年1:00”，
“系列”：“世纪材料”，
“状态”：“拥有”，
“团队”：“华盛顿足球队”，
“类型”：“自动”，
“用户”：jinky32@gmail.com",
“变体”：“全息银”，
“年份”：“2010年”
},
{
“_id”：{
$oid:“5f78533d82c81067eafdc06d”
},
“卡号”：“Was-Ter-4383”，
“品牌”：“国宝”，
“卡号”：{
$numberDouble:“187”
},
“职业舞台”：“新人卡”，
“forTrade”：“，
“图像路径”：https://res.cloudinary.com/dkwmxhsem/image/upload/t_Card 调整大小/v1599758190/“，
“制造商”：“帕尼尼”，
“编号”：{
$numberDouble:“1”
},
“玩家”：“特里·麦克劳林”，
“打印运行”：{
$numberDouble:“10”
},
“购买日期”：“10月3日星期六00:00:00 GMT+2020年01:00”，
“系列”：“新人签名补丁”，
“状态”：“拥有”，
“团队”：“华盛顿足球队”，
“类型”：“RPA”，
“用户”：jinky32@gmail.com",
“变体”：“全息黄金”，
“年份”：“2019年”
},
{
“_id”：{
$oid:“5f78533f82c81067eafdc14a”
},
“卡号”：“Was-Ant-9898”，
“品牌”：“黑色”，
“卡号”：{
$numberDouble:“229”
},
“职业舞台”：“新人卡”，
“forTrade”：“，
“图像路径”：https://res.cloudinary.com/dkwmxhsem/image/upload/t_Card 调整大小/v1599758190/“，
“制造商”：“帕尼尼”，
“编号”：{
$numberDouble:“114”
},
“玩家”：“安东尼奥·吉布森”，
“打印运行”：{
$numberDouble:“199”
},
“购买日期”：“2009年9月10日星期四00:00:00 GMT+2020年1:00”，
“系列”：“新秀补丁签名”，
“状态”：“拥有”，
“团队”：“华盛顿足球队”，
“类型”：“RPA”，
“用户”：jinky32@gmail.com",
“变体”：“基础”，
“年份”：“2020年”
}
]
const renderCard=（卡片、索引）=>{
console.log（Object.values（card.card\u编号）[0]）
}
values.map（renderCard）

通过您提供的示例数据，我看到了数据。您的某些数据可能没有卡号

你可以这样试试

{card?.card_number && `(#${Object.values(card.card_number)})`} 
{card?.card_number?.$numberDouble && `(#${card.card_number.$numberDouble})` }

---

查看

感谢您的回复-我已经将其添加到问题的底部为什么要这样做-

Object.values（this.props.data）

而不仅仅是访问

这个.props.data

？道具可能是一个对象，但这并不意味着数据是真实的。听起来你在为自己把事情复杂化。

console.log（this.props.data）的输出是什么？

感谢您的帮助@Craicerjack。我已将您要求的内容添加到原始问题的底部，并在选择react组件时显示了

$r

的输出。是的，因此

this.props.data

是一个数组。@Craicerjack这就是我开始这段疯狂旅程的地方：）。但是如果我使用

{this.props.data.map（renderCard）}

我得到

类型错误：this.props.data.map不是一个函数

，我以为它告诉我

this.props.data

不是一个数组

{card?.card_number && `(#${Object.values(card.card_number)})`} 
{card?.card_number?.$numberDouble && `(#${card.card_number.$numberDouble})` }