如何使用"filter"和"map"判断列表是否为空

Question

list
.filter((val) => {
if (
val.name.toLocaleLowerCase().includes(input))
) {
return val
}
})
.map((val, idx) => (
<Li
key={idx}
/>
))

使用这个结构，我想做一些事情，如果返回空。

示例:当搜索"abc"没有"abc";在列表中，出现一条消息说"abc"未找到。

Answer 1

需要改变的地方:

1。您的过滤器表达式只能在意外情况下工作

list
.filter((val) => {
if (
val.name.toLocaleLowerCase().includes(input))
) {
return val
}
})

可以只是

list
.filter(val => val.name.toLocaleLowerCase().includes(input)

请记住，filter内部的函数只返回true或false。偶然地，返回实际列表元素的表达式被解释为true，当表达式不匹配时，不返回任何东西，这与返回false具有相同的效果。用上面的方式表达可以让你更清楚地知道你在做什么(而且速度会快一点)。

2。要获得错误消息，保存过滤器的输出，以便测试其长度。

const matches = list.filter(val => val.name.toLocaleLowerCase().includes(input)
const output =  (matches.length>0) ? 
matches.map((val, idx) => (
<Li
key={idx}
/>
)) : (
<div>Not found</div>
)

Answer 2

可以使用"filter"来判断列表是否为空。和";map"使用以下JavaScript代码:

list
.filter((value) => (value!==undefined) && (value!==null) && value.name.toLocaleLowerCase().includes(input)))
.map((value, id) => (
<Li
key={id}
/>
))