![](/img/trans.png)
[英]How to loop through array of objects and create a new array of objects with only certain properties using typescript and react?
[英]How to loop through properties of objects inside of an array within a React component?
这是我的父组件的渲染函数:
render() {
const users = [
'tom': {
phone: '123',
email: 'hotmail'
},
'rob': {
phone: '321',
email: 'yahoo'
},
'bob': {
phone: '333',
email: 'gmail'
},
];
const list = users.map((user) =>
(<User
name={user}
phone={users.phone}
email={users.email}
/>),
);
return <ul>{list}</ul>;
}
输出显示如下:
这是Child组件的render函数:
render() {
const {
name,
phone,
email,
} = this.props;
const info = [name, phone, email];
const item = info.map((index) => (
<li key={index}>
{ index }
</li>
));
return item;
}
如何获得与电话号码和电子邮件一起显示的信息? 不知道我做错了什么。 谢谢。
首先,这是无效的javascript:
const users = [
'tom': {
phone: '123',
email: 'hotmail'
},
// ...
];
您应该定义一个数组或一个对象。 假设您的users
是一个对象文字:
const users = {
'tom': {
phone: '123',
email: 'hotmail'
},
// ...
};
然后,您可以遍历对象的条目 :
const list = Object.entries(users).map(([name, info]) =>
(<User
name={name}
phone={info.phone}
email={info.email}
/>)
);
但是并非所有浏览器都支持Object.entries()
,请检查它是否在您的环境中有效。
首先是users
不是有效的数组。如果要在主作用域中使用键值对,请使用Object
({})
render() {
const users = {
'tom': {
phone: '123',
email: 'hotmail'
},
'rob': {
phone: '321',
email: 'yahoo'
},
'bob': {
phone: '333',
email: 'gmail'
},
};
const list = Object.keys(users).map((user) =>
(<User
name={user}
phone={users[user].phone}
email={users[user].email}
/>),
);
return <ul>{list}</ul>;
}
您需要在父组件的地图功能中引用“用户”而不是“用户”。 “用户”变量的目的是代表数组中每个元素的当前实例。 因此,地图功能应如下所示:
const list = users.map((user) =>
(<User
name={user}
phone={user.phone}
email={user.email}
/>),
);
代替。
一种解决方案是将“列表”更改为实际列表:
const users = [
{
name: 'tom',
phone: '123',
email: 'hotmail'
},
{
name: 'rob,
phone: '321',
email: 'yahoo'
},
{
name: 'bob',
phone: '333',
email: 'gmail'
},
];
现在是用户user.name
而不是user
。
或者,创建一个由每个用户的名称作为键的对象:
const users = {
'tom': {
phone: '123',
email: 'hotmail'
},
'rob': {
phone: '321',
email: 'yahoo'
},
'bob': {
phone: '333',
email: 'gmail'
},
};
然后映射键:
const list = Object.keys(users).map((user) =>
(<User
name={user}
phone={users[user].phone}
email={users[user].email}
/>),
);
您的const用户应进行修改以通过他们进行映射。
const users = [
{
name: 'tom',
phone: '123',
email: 'hotmail',
},
{
name:'rob',
phone: '321',
email: 'yahoo'
},
{
name: 'bob',
phone: '333',
email: 'gmail'
},
];
const list = users.map((usr =>
(<User
name={usr.name}
phone={usr.phone}
email={usr.email}
/>),
);
return <ul>{list}</ul>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.