[英]How to loop through properties of objects inside of an array within a React component?
Here is my Parent component's render function: 这是我的父组件的渲染函数:
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>;
}
The output shows up like this: 输出显示如下:
And here is the Child component's render function: 这是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;
}
How can I get it to show with the phone numbers and emails? 如何获得与电话号码和电子邮件一起显示的信息? Not sure what I'm doing incorrectly.
不知道我做错了什么。 Thanks.
谢谢。
At first this is not valid javascript: 首先,这是无效的javascript:
const users = [
'tom': {
phone: '123',
email: 'hotmail'
},
// ...
];
You should either define an array or an object. 您应该定义一个数组或一个对象。 Let's say your
users
is an object literal: 假设您的
users
是一个对象文字:
const users = {
'tom': {
phone: '123',
email: 'hotmail'
},
// ...
};
Then you can iterate over entries of the object: 然后,您可以遍历对象的条目 :
const list = Object.entries(users).map(([name, info]) =>
(<User
name={name}
phone={info.phone}
email={info.email}
/>)
);
However Object.entries()
is not supported in all browsers, check if it works in your environment. 但是并非所有浏览器都支持
Object.entries()
,请检查它是否在您的环境中有效。
First thing is that users
is not a valid array If you want key value pair in main scope then use Object
({}) 首先是
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>;
}
You need to be referring to "user" instead of "users" inside of the Parent component's map function. 您需要在父组件的地图功能中引用“用户”而不是“用户”。 The purpose of the "user" variable is to represent the current instance of each element in the array.
“用户”变量的目的是代表数组中每个元素的当前实例。 So the map function should look like:
因此,地图功能应如下所示:
const list = users.map((user) =>
(<User
name={user}
phone={user.phone}
email={user.email}
/>),
);
instead. 代替。
One solution is to change your "list" to an actual list: 一种解决方案是将“列表”更改为实际列表:
const users = [
{
name: 'tom',
phone: '123',
email: 'hotmail'
},
{
name: 'rob,
phone: '321',
email: 'yahoo'
},
{
name: 'bob',
phone: '333',
email: 'gmail'
},
];
Now user user.name
instead of user
. 现在是用户
user.name
而不是user
。
Alternatively, create an object keyed by the names of each user: 或者,创建一个由每个用户的名称作为键的对象:
const users = {
'tom': {
phone: '123',
email: 'hotmail'
},
'rob': {
phone: '321',
email: 'yahoo'
},
'bob': {
phone: '333',
email: 'gmail'
},
};
Then map over the keys: 然后映射键:
const list = Object.keys(users).map((user) =>
(<User
name={user}
phone={users[user].phone}
email={users[user].email}
/>),
);
Your const users should be modified to map through them. 您的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.