我有一個要渲染的產品串列。我還有一組關鍵字，用于將產品排除在渲染之外。
我正在遍歷關鍵字陣列并檢查產品標題是否包含任何條目。然后它回傳一個布林值。
以下代碼不起作用。console.log 作業并反映了結果，但沒有呈現任何內容。
function inExcludes(product, excludedItems) {
excludedItems.forEach( item => {
if (product.includes(item)) {
console.log(true);
return true;
} else {
console.log(false);
return false;
}
})
}
export function CardsFiltered(props) {
const cards = props.items.map((product) => {
if (inExcludes(product.title, props.excludedItems) === false)
return (
<CardValidation
key={product.id}
id={product.id}
product={product}
/>
)
})
return (
<>
{cards}
</>
);
}
但是如果我將一個變數設定為布林值，如果條件為真則切換該變數，然后回傳該變數，它可以作業并且我的卡片被渲染（下面的代碼）。
有沒有人能夠闡明這一點？因為我想不通。
function inExcludes(product, excludedItems) {
let result = false;
excludedItems.forEach( item => {
if (product.includes(item)) {
result = true;
}
})
return result;
}
export function CardsFiltered(props) {
const cards = props.items.map((product) => {
if (!inExcludes(product.title, props.excludedItems))
return (
<CardValidation
key={product.id}
id={product.id}
product={product}
/>
)
})
return (
<>
{cards}
</>
);
}
uj5u.com熱心網友回復：
您對“inExcludes”的第一個實作沒有回傳布林值（真/假）。它只是對 excludeItems 陣列中的每個專案執行“forEach”。該回圈中的 return 不會從整個函式中回傳。
因此，由于它有效地回傳“未定義”，因此您的渲染決定不渲染任何內容。
這是你所追求的東西（簡化了一點）：
https://codesandbox.io/s/awesome-mcclintock-hkkhsi?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/479547.html
標籤：javascript 反应 列表 条件渲染
下一篇：遞回獲取嵌套串列的所有元素