.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>

（不知道您想为“公司信条”显示什么）

arrays arrays arrays javascript-objects json reactjs reactjs reactjs reactjs