這是控制臺內顯示的資料：
我嘗試用這些顯示它，但失敗了
{Object.entries(value).map(([key, value]) => {
return (
<p key={key}>
<li>
{key}
{value}
{console.log(value.id)} //this will show as undefined
</li>
</p>
);
})}
{value}將顯示此錯誤：
物件作為 React 子物件無效（找到：帶有鍵 {color, quantity} 的物件）。如果您打算渲染一組子項，請改用陣列。
{value.id}或{value.name}將顯示為未定義
使用地圖，它會說這value.map不是一個功能
{value.map((value, key) => (
<>
<div>{value.id}</div>
<div>{value.name}</div>
</>
))}
密碼箱： https ://codesandbox.io/s/display-the-manipulated-data-dy204r
uj5u.com熱心網友回復：
您的物件具有復雜的結構，并且為了迭代，您需要檢查其中一項是否正在Array使用Array.isArray()，如果是，則回圈它們并使用，否則直接使用屬性
以下是您的物件和迭代模擬的作業代碼。我剛剛記錄了這些值，你可以以任何你想要的方式使用它們
let myObj = {
s: [{
color: 'a',
q: '8'
}, {
color: 'b',
q: '2'
}],
name: 'Anne',
id : 18
}
Object.keys(myObj).forEach(function(key) {
if (Array.isArray(myObj[key])) {
myObj[key].forEach(function (item, index) {
console.log(item.color);
console.log(item.q);
});
}
else
console.log(myObj[key])
});uj5u.com熱心網友回復：
你可以做這樣的事情
{Object.entries(value).map((v, key) => {
return (
<p key={key}>
<li>
{key}
{v.name}
{console.log(v.id)} //this will show as undefined
</li>
</p>
);
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441532.html
標籤：javascript 反应