如何在React中映射对象数组
如何在React中映射对象数组
提问于 2016-12-08 05:26:40
我有一个对象数组。我想映射这个对象数组。我知道如何映射数组，但不知道如何映射对象数组。以下是我到目前为止所做的工作：
我要映射的对象数组：
const theData = [
{
name: 'Sam',
email: 'somewhere@gmail.com'
},
{
name: 'Ash',
email: 'something@gmail.com'
}
]我的组件：
class ContactData extends Component {
render() {
//works for array
const renData = this.props.dataA.map((data, idx) => {
return {data}
});
//doesn't work for array of objects
const renObjData = this.props.data.map(function(data, idx) {
return {data}
});
return (
//works
{rennData}
object
//doesn't work
{renObjData}
)
}
}
ContactData.PropTypes = {
data: PropTypes.arrayOf(
PropTypes.obj
),
dataA: PropTypes.array
}
ContactData.defaultProps = {
data: theData,
dataA: dataArray
}我错过了什么？
回答 6
Stack Overflow用户
回答已采纳
发布于 2016-12-08 05:46:10
您需要的是映射您的对象数组，并记住每个项目都将是一个对象，因此您将使用例如点表示法来获取对象的值。
在您的组件中
[
{
name: 'Sam',
email: 'somewhere@gmail.com'
},
{
name: 'Ash',
email: 'something@gmail.com'
}
].map((anObjectMapped, index) => {
return (
{anObjectMapped.name} - {anObjectMapped.email}
);
})记住，当你放置一个jsx数组时，它有不同的含义，你不能仅仅把对象放在你的render方法中，就像你可以放一个数组一样。
请看我的答案：
将数组映射到jsx
Stack Overflow用户
发布于 2016-12-08 05:44:14
我想你想要打印人员的姓名，或者同时打印姓名和电子邮件：
const renObjData = this.props.data.map(function(data, idx) {
return {data.name};
});或者：
const renObjData = this.props.data.map(function(data, idx) {
return ([
{data.name},
{data.email},
]);
});Stack Overflow用户
发布于 2017-10-02 02:53:20
@FurkanO提供了正确的方法。不过，为了采用更简洁的方法(es6方式)，您可以这样做
[{
name: 'Sam',
email: 'somewhere@gmail.com'
},
{
name: 'Ash',
email: 'something@gmail.com'
}
].map( ( {name, email} ) => {
return {name} - {email}
})干杯！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41027663
复制相关文章
相似问题
腾讯云开发者
