.map 在对象数组上，在对象中有一个子对象：[ {}, { { { } } }, { } ]

Question

目前正在使用一些已解析的 json 映射出一些模板卡，但我注意到我没有在 .map 方法中正确返回/访问从我的 fetch 调用返回的数据。

这是json数据的sn-p：

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

Answer 1

我可以从上面提供的信息中观察到您想要呈现所有用户。 我可以看到，在给定的 JSON 数据中，“公司”属性是对象中的一个对象并包含属性。您收到的错误是由于这个原因。因为 Object 字面量不能作为 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”，因为公司是对象中的另一个对象。因此，可能希望通过使用点符号访问它来迭代相同的特定属性。

这不会给你错误。

Answer 2

信用@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>

Answer 3

首先，如果您至少添加一个错误的屏幕截图，这将有很大帮助，我假设您遇到的错误是由于您共享的代码。

至于代码，我注意到的一件事是您使用了两次{user.company} 的值，dataArr 中的值是一个对象。为了使其工作，您需要指定 user.company 中的三个道具中的哪一个，您将在这两个实例中使用：

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>

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