我有一個名為 carousel.cards 的陣列。他有 14 個物件。我想在這個物件內渲染影像（稱為 carouselHome）。只有 2 個物件有影像。我想過濾剩下的 12 個未定義的物件。
請問我做錯了什么？
<div className="embla__container-home">
{carousel.cards.map((image) => {
if (image.fields.carouselHome !== undefined)
<img
src="image.fields.carouselHome.fields.file.url"
alt="Image d'acceuil"
/>;
})}
</div>
uj5u.com熱心網友回復：
我想你可能只想要Array.prototype.filter()。它幾乎就像 map 一樣作業，但它會根據您的回呼過濾掉值。（這種情況下的回呼總是回傳一個布林值）
filter() 方法創建一個新陣列，其中包含通過所提供函式實作的測驗的所有元素。
MDN 上的示例顯示了基于長度的過濾，但您可以通過將回呼更改為以下內容輕松擺脫未定義的值：
const result = words.filter(word => !word);
filter 真的很方便，我一直單獨使用它并與 map 結合使用。由于它回傳一個新陣列，因此您可以直接將字串映射到它。嘗試這個：
{carousel.cards.filter(img => !img).map(
image => (
<img
src={image.fields.carouselHome.fields.file.url}
alt="Image d'acceuil"
/>;
)
})}
注意：我還將該src屬性更改為運算式，您的示例將僅呈現"image.fields.carouselHome.fields.file.url"為字串:)
uj5u.com熱心網友回復：
您缺少回傳，因此它不會回傳要渲染的節點。
如果它為空，則回傳一個檔案片段或 null。
<div className="embla__container-home">
{carousel.cards.map((image) => {
if (image.fields.carouselHome !== undefined)
return <img
src="image.fields.carouselHome.fields.file.url"
alt="Image d'acceuil"
/>;
return <></> // or null;
})}
</div>
編輯：腦殘；更清潔的解決方案是使用filter：
carousel.cards.filter((image) => image.fields.carouselHome))...
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427157.html
標籤：javascript 数组 筛选