如何解决.map 在一个对象数组上,在一个对象中有一个子对象:[ {}, { { { } } }, { } ]
目前正在使用一些已解析的 json 映射一些模板卡,但我注意到我没有在 .map 方法中正确返回/访问从我的 fetch 调用返回的数据。
这里是json数据的一个片段:
const dataArr = [
{
id: 1,name: "Leanne Graham",username: "Bret",email: "Sincere@april.biz",address: {
street: "Kulas Light",suite: "Apt. 556",city: "Gwenborough",zipcode: "92998-3874",geo: {
lat: "-37.3159",lng: "81.1496"
}
},phone: "1-770-736-8031 x56442",website: "hildegard.org",company: {
name: "Romaguera-Crona",catchPhrase: "multi-layered client-server neural-net",bs: "harness real-time e-markets"
}
},{
id: 2,name: "Ervin Howell",username: "Antonette",email: "Shanna@melissa.tv",address: {
street: "Victor Plains",suite: "Suite 879",city: "Wisokyburgh",zipcode: "90566-7771",geo: {
lat: "-43.9509",lng: "-34.4618"
}
},phone: "010-692-6593 x09125",website: "anastasia.net",company: {
name: "Deckow-Crist",catchPhrase: "Proactive didactic contingency",bs: "synergize scalable supply-chains"
}
},
我正在尝试将其与以下模板一起使用:
const renderUser = (user,index) => {
return(
<div className="user-card" key={"user-" + index}>
<header>
<h2>{user.name}</h2>
</header>
<section className="company-info">
<p><b>Contact:</b>{user.email}</p>
<p><b>Works for:</b>{user.company}</p>
<p><b>Company creed:</b>{user.company}</p>
</section>
<footer>
<button className="load-posts">POSTS BY {user.username}</button>
<button className="load-albums">ALBUMS BY {user.username}</button>
</footer>
</div>
)
};
目前我已经尝试过:
dataArr.map(renderUser);
虽然没有用。
我可能哪里出错了?
在此先感谢您的帮助 - 至少坚持了 10 个小时?enter image description here
解决方法
信用@KevinHaxhi 用户:16532250:
company: {
name: "Romaguera-Crona",catchPhrase: "Multi-layered client-server neural-net",bs: "harness real-time e-markets",},
<p><b>Works for:</b>{user.company}</p>
<p><b>Company creed:</b>{user.company}</p>
正确实现的示例:
<p><b>Works for:</b>{user.company.name}</p>
<p><b>Company creed:</b>{user.company.catchPhrase}</p>
,
我可以从上面提供的信息中观察到您想要呈现所有用户。 我可以看到在给定的 JSON 数据中,“company”属性是对象中的一个对象并包含属性。您收到的错误是由于这个原因。因为对象字面量不能作为 React 组件的子级工作。相反,您需要访问您正在寻找的特定属性。 这里有一个更简单的方法来解决上述问题。
创建一个接收renderUser组件的父组件。映射 dataArr 并通过 props 传递你想要使用的特定属性。
const Parent=()=>{
return(
<div>
{dataArr.map((user)=>
<Renderuser key={user.id}
name={user.name}
email={user.email}
company={user.company}
username={user.username}
/>
)}
</div>
)
}
调用 renderUser 中的 props。此外,React 组件的名称应以大写字母开头。所以,你可能也想改变它。
const Renderuser = ({name,email,company,username}) => {
return(
<div className="user-card" >
<header>
<h2>Name: {name}</h2>
</header>
<section className="company-info">
<p><b>Contact:</b>{email}</p>
<p><b>Works for:</b>{company.name}</p>
<p><b>Company creed:</b>{company.name}</p>
</section>
<footer>
<button className="load-posts">POSTS BY : {username}</button>
<button className="load-albums">ALBUMS BY : {username}</button>
</footer>
</div>
)
};
请注意,我使用了“company.name”,因为 company 是对象中的另一个对象。因此,可能希望通过使用点表示法访问它来迭代相同的特定属性。
这不会给你错误。
,首先,如果您至少添加错误的屏幕截图会很有帮助,我假设您是由于共享的代码而遇到的。
至于代码,我注意到的一件事是您使用了 {user.company}
的值两次,其中 dataArr
是一个对象。为了使其工作,您需要指定在这两个实例中将使用 user.company
中的三个 props 中的哪一个:
company: {
name: "Romaguera-Crona",
我正在谈论的实例:
<p><b>Works for:</b>{user.company}</p>
<p><b>Company creed:</b>{user.company}</p>
正确实现的示例:
<p><b>Works for:</b>{user.company.name}</p>
<p><b>Company creed:</b>{user.company.catchPhrase}</p>
(不知道您想为“公司信条”显示什么)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。