javascript - React TypeError:skills.map 不是函数
问题描述
我有一个对象skills
,我想遍历它并映射它的内容。该对象如下所示:
{
"_id": {
"$oid":"5d85b311e180652980824193"
},
"date":{
"$date":{ "$numberLong":"1569043209148" }
},
"title": "test",
"image":"test image",
"description":"test desc",
"__v":{
"$numberInt":"0"
}
}
我正在使用 MongoDB,我的映射如下所示:
componentDidMount() {
this.props.fetchSkills();
}
render() {
const { skills } = this.props
let skillData
if (skills.length === 0) {
return (
<p>There are no skills to display</p>
)
} else {
skillData = skills.map(skill => (
<div key={skill._id}>
<div>
<img src={skill.image} alt="" />
</div>
<div>
<h2>{skill.title}</h2>
<div>
<span>{skill.date}</span>
</div>
<div>
<p>{skill.description}</p>
</div>
</div>
</div>
))
}
return (
<div>
{skillData}
</div>
)
}
但是,当我加载页面时出现此错误:
TypeError:skills.map 不是函数
26 | )
27 | } else {
28 |
> 29 | skillData = skills.map(skill => (
30 | ^
31 | <div className="item" key={skill._id}>
32 |
我认为这是因为 .map 只能遍历数组,但我试图遍历一个对象。
解决方案
您需要有一个array
, 才能使用该函数对其进行迭代.map()
因此,只需将您object
的转换为array of objects
这样的:
[
{
"_id": {
"$oid":"5d85b311e180652980824193"
},
"date":{
"$date":{ "$numberLong":"1569043209148" }
},
"title": "test",
"image":"test image",
"description":"test desc",
"__v":{
"$numberInt":"0"
}
}
]
现在您将能够成功使用.map()
推荐阅读
- c - 如何将数字的数字输出为整数,这些数字可以精确地划分另一个数字?
- node.js - 支持 ApolloServer 中的 Objection `$formatJson`
- java - 使用 Guava 缓存作为具有基于时间的驱逐的地图
- r - 使用 R、rvest 或 rcurl 抓取文本文件
- php - 外部产品类型中的 Woocommerce 虚拟类型选项
- ios - iOS中asp.net Intranet应用程序的Windows Active Directory身份验证
- flask - 使用 Post 方法测试 Flask API 发送 JSON 数据时出现 403 错误
- android - Firebase Analytics 控制台仪表板中的内部错误
- javascript - Angular app.component.html 未呈现新组件
- angular-material - 如何更改垫子单选按钮的光标?