我很难弄清楚这个问题，如果有人向我澄清这个概念，我将不胜感激。使用以下代码，我可以将道具解析为另一个组件，即 UserItem，并显示用户名和电子邮件。我还想显示“名字”以及其他详细信息。我可以轻松地const {username, email} = this.state.user分解其他人，例如：但是当我添加 const {name: fisrtname, username, email} 时，它不起作用。但是如果我放入this.state.user.name.firstnameUserItem 组件，那么我可以在浏览器中看到名字。那么我将如何解构嵌套对象和/或将嵌套对象的 props 解析为其他组件？提前致谢。
users: [
{
username: "johndoe",
email: "[email protected]",
name: {
firstname: "John",
id: "2",
},
id: "1",
},
],
};
render() {
return (
<div>
{this.state.users.map((user) => (
<UserItem key={user.id} user={user} />
))}
</div>
);
}
}
**This is UserItem component**
class UserItem extends Component {
render() {
const { name: firstname, email, username, phone } = this.props.user;
// console.log(this.props.user);
return (
<div>
<h3>{this.props.user.name.firstname}</h3>
<h3>{email}</h3>
<h3>{username}</h3>
<h3>{phone}</h3>
</div>
);
}
}
我只是扩展和描述@Alex Yepes 的回答。看看你的代码
{
username: "johndoe",
email: "[email protected]",
name: { // here the name is also an object.
firstname: "John",
id: "2",
},
id: "1",
},
由于“名称”也是一个对象，因此您也需要对其进行解构。例如：在您第一次解构时，您只能直接访问该对象的属性
const {username, email, name, id} = user;
console.log(username); //result: 'johndoe'
console.log(name); //result: {firstname: 'John', id: 2}
在这里你可以看到 username 的值是一个字符串，但 'name' 的值是一个对象，这就是为什么你也需要解构这个对象。否则，您必须使用对象或括号表示法，例如：
console.log(name.firstname); // result: 'John'
//or
console.log(name[firstname]) // result: 'John'
但是如果你像这样解构：
const { name: {firstname}, email, username, phone } = this.props.user;
您可以直接访问“名称”，因为“名称”对象不再是对象。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句