如何使用“过滤器”和“映射”判断列表是否为空

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

您可以使用以下 JavaScript 代码使用“过滤器”和“映射”判断列表是否为空：

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