我試圖在我的 API 中的物件中訪問一些嵌套值。我還試圖將這些值作為道具從子組件傳遞到父組件。
一切正常，但我無法在“地址”和“公司”中顯示任何值。
我正在嘗試使用 {address.name} 和 {adress[0].name}，但兩者都出現錯誤。
我想列印街道、套房、城市和郵政編碼。
這是我的 API：
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"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"
}
},
這是我在父組件中回傳的內容：
return (
<>
<header>
<h1>Users list</h1>
</header>
<section>
<ul>
{users.map(user => (
<li key={user.id}>
<button onClick ={() => setSelectedUser(user)}>{user.name}</button></li>
))}
</ul>
{selectedUser && (
<UserDetail
name={selectedUser.name}
username={selectedUser.username}
email={selectedUser.email}
adress={selectedUser.adress.street}
phone={selectedUser.phone}
company={selectedUser.company.name}
/>)}
</section>
</>
這是我從兒童組合傳遞的內容：
const UserDetail = ({name, username, email, adress, phone, website, company}) => {
return (
<div>
<h1>{name}</h1>
<p>{username}</p>
<p>{email}</p>
<p>Adress:{adress.street}</p>
<p>{phone}</p>
<p>{website}</p>
<p>{company.name}</p>
</div>
)
}
export default UserDetail
uj5u.com熱心網友回復：
回應包含address但您使用的是單個s selectedUser.adress. 因為company您將公司名稱作為道具傳遞，因此您不必再做一次，company.name而只需company.
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/343497.html