Блог

В настоящее время я работаю над отображением некоторых карточек шаблонов с помощью некоторого проанализированного json, но я заметил, что не возвращаю / не получаю доступ к данным, возвращенным из моего вызова выборки, должным образом в методе .map.

Вот фрагмент данных 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 часов 😅введите описание изображения здесь

Кредит @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 свойство «компания» является объектом внутри объекта и содержит свойства. Ошибка, которую вы получаете, вызвана этим. Потому что объектные литералы не будут работать в качестве дочернего компонента React. Скорее вам нужно получить доступ к конкретному свойству, которое вы ищете. Вот более простой способ решить вышеуказанную проблему.

Создайте родительский компонент, который получает компонент renderUser. Сопоставьте данные и передайте конкретные свойства, которые вы хотите использовать, с помощью реквизитов.

     const Parent=()=>{

   return(
       <div>
         {dataArr.map((user)=> 
    
        <Renderuser key={user.id}
                    name={user.name}
                    email={user.email}
                    company={user.company}
                    username={user.username}
             /> 
           )}
      </div>
   )
}
 

Вызовите реквизиты в пользователе визуализации.Кроме того, имя компонентов 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» поскольку компания-это еще один объект внутри объекта. Таким образом, может потребоваться повторить определенное свойство того же самого, получив к нему доступ с помощью точечной записи.

Это не даст вам ошибки.

Прежде всего, было бы очень полезно, если бы вы добавили хотя бы скриншот своей ошибки, с которой, я полагаю, вы столкнулись из-за кода, которым вы поделились.

Что касается кода, то я заметил одну вещь: вы используете значение {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>
 

(не знал, что вы хотели показать для «Кредо компании»)