我已經反應原生回圈來填充選擇專案，如下所示
const categorylist = arr.map((data, key) => {
if (data != "") {
return <Select.Item label={data} value={data} key={data} />;
}
});
我像下面一樣回圈并使用它，當陣列包含非空值時它作業正常，但是當有空值時我得到錯誤
TypeError：null 不是物件（評估“child.props”）
<Select>
{categorylist2}
</Select>
如何使用 map 僅發送非空陣列項。請注意，我不希望arr受到影響，因為我需要在其他功能中保持不變。
uj5u.com熱心網友回復：
filter取出空元素，然后map在陣列上filter回傳。
這是一個人為的示例，向您展示它是如何作業的。
const arr = [undefined, 'Bob', '', 'Sally', 'Joe', '', null, 'Pam'];
// `filter` out the empty/null/undefined elements
// and then `map` over that filtered array
const out = arr
.filter(el => el)
.map(el => `<div>${el}</div>`);
document.body.innerHTML = out.join('');uj5u.com熱心網友回復：
僅當陣列不為空時才需要映射陣列并使用 filter(Boolean) 過濾掉空陣列。
const newArr = arr.filter(Boolean);
const categorylist = (newArr.length > 0) && newArr.map((data, key) => {
return <Select.Item label={data} value={data} key={data} />;
});
uj5u.com熱心網友回復：
這是因為在您的地圖中，您沒有為空值回傳任何內容，這意味著 null 這就是您遇到錯誤的原因。map 函式應該總是回傳一些東西。
在地圖之前使用過濾器，如下所示：
arr.filter(data => data !== "").map(data => <Select.Item label={data} value={data} key={data} />)
uj5u.com熱心網友回復：
可以通過reducer功能來實作。
使用 Array.filter() 然后 Array.map() 會遍歷陣列兩次，但是使用 Array.reduce() 只遍歷一次就可以達到同樣的效果，因此效率更高。
更多關于它在這里
const categorylist = arr.reduce((prev, current, index) => {
if (current != "") {
prev.push(<Select.Item label={current} value={current} key={current} />);
}
return prev;
}, []);
console.log(categorylist);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/459140.html
標籤：javascript 数组 反应 反应式
上一篇：重構Javascript物件陣列
下一篇：動態多變數濾波函式