在這段代碼中，除了我的“風味”之外，所有的東西都列印出來了，它只回傳一個屬性值（瀏覽器中索引為 0 的那個）而不是它應該回傳的陣列。我應該每個條目顯示 3 種風味。我相信答案是將該陣列映射到我當前的條目陣列中，但我不確定如何寫出來。感謝任何幫助或提示！
return (
<>
<article className="entries">
{
entries.map(entry => {
return <section key={`entry--${entry.id}`} className="entry">
<div>
<ul>
<div><img src={entry.image} height="300" /></div>
<li>Name: {entry.name}</li>
<li>Brewing Method: {entry.brewing_method.type}</li>
<li>Grind Setting: {entry.grind_setting}</li>
<li>Rating: {entry.rating}</li>
<li>Flavors: {entry?.flavor_profile[0]?.name}</li>
<li>Notes: {entry.notes}</li>
</ul>
uj5u.com熱心網友回復：
您將需要一個嵌套map()來呈現一個嵌套串列，或者只是一個風味字串
只需一串 3 種口味，無論您可以使用的實際數字是多少slice()，然后map()是 name 屬性，最后是join().
<li>Flavors: {entry.flavor_profile?.slice(0, 3).map(({ name }) => name).join(', ')}</li>
對于串列，您需要創建一個<ul>填充了映射風味<li>元素的嵌套
return (
<>
<article className="entries">
{
entries.map(entry => {
return (
<section key={`entry--${entry.id}`} className="entry">
<div>
<ul>
<div><img src={entry.image} height="300" /></div>
<li>Name: {entry.name}</li>
<li>Brewing Method: {entry.brewing_method.type}</li>
<li>Grind Setting: {entry.grind_setting}</li>
<li>Rating: {entry.rating}</li>
<li>Flavors:
<ul>
{
entry.flavor_profile?.map(({ name }) => (
<li>{name}</li>
))
}
</ul>
</li>
<li>Notes: {entry.notes}</li>
</ul>
</div>
</section>
)
})
}
</article>
</>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492929.html
標籤：javascript 数组 for循环 映射