3 回答

TA貢獻2041條經驗 獲得超4個贊
這應該有助于:
const address = contacts[0].address;
<>
{Object.keys().map((addressKey, index) => (
<span className="d-block" key={index}>
{typeof address[addressKey] === "object"
? Object.keys(address[addressKey]).map(e => (
<span>{address[addressKey][e]}</span>
))
: contacts[0].address[address]}
</span>
))}
</>;

TA貢獻1828條經驗 獲得超3個贊
我認為這不是問題,只要它顯示它們
映射后,contacts您可以隨意增加地址屬性:
const contacts = [
{
id: 1,
name: "Leanne Graham",
email: "[email protected]",
address: {
street: "Kulas Light",
city: "Gwenborough",
geo: {
lat: "-37.3159",
lng: "81.1496",
},
},
phone: "1-770-736-8031",
},
{
id: 2,
name: "Ervin Howell",
email: "[email protected]",
address: {
street: "Victor Plains",
city: "Wisokyburgh",
geo: {
lat: "-43.9509",
lng: "-34.4618",
},
},
phone: "010-692-6593",
},
];
const addresses = contacts.map(({ address, id }) => ({
id,
...address,
}));
console.log(addresses);
就像渲染它們一樣:
addresses.map(({ street, city, id }) => (
<span className="d-block" key={id}>
{street}:{city}
</span>
))

TA貢獻1809條經驗 獲得超8個贊
您可以映射一個數組,因為您希望它在每個元素中具有一致的值,但對于 object,情況并非如此。所有的值都是不同的,具有不同的含義。此外,您的 span 將無法顯示對象,它只會顯示原始值,例如字符串或數字
您可以手動完成您想要實現的目標。
const { contacts } = this.state;
return (
<>
{contacts.map(({ address }, id) => {
return (
<React.Fragment key={id}>
<span>Street: {address.street}</span>
<span>City: {address.city}</span>
<span>Lat: {address.geo.lat}</span>
<span>Lng: {address.geo.lng}</span>
</React.Fragment>
);
})}
如果您真的想使用循環或某種形式的迭代來做到這一點,您可以查看Object.entries。但是如果你不知道你在處理什么,那么使用嵌套對象真的很難做到這一點。
contacts.map(({ address }) => {
for (let [key, value] of Object.entries(address)) {
console.log(`${key}: ${value}`); // logs "street: Kulas Light"
}
})
但是請注意,如果您將其直接放入跨度中geo,它將給出。"geo: [Object object]"
PS我建議找到一個比片段的數組索引更好的鍵。
添加回答
舉報