'预计在箭头函数结束时返回一个值' - 除了过滤器之外还有其他方法吗？答案

【问题标题】：'Expected to return a value at the end of arrow function' - Is there another way to do this other than filter?'预计在箭头函数结束时返回一个值' - 除了过滤器之外还有其他方法吗？
【发布时间】：2021-10-24 20:26:43
【问题描述】：

这是我的代码 -

  {data?.results
              ?.filter(item => {
                if (searchTerm === '') {
                  return item;
                } else if (
                  item.title
                    .toLowerCase()
                    .includes(searchTerm.toLowerCase()) ||
                  item.description
                    .toLowerCase()
                    .includes(searchTerm.toLowerCase())
                ) {
                  return playlist;
                }
              })
              .map((item, index) => (
                <StoreItem
                  key={index}
                  id={item.id}
                  title={item.title}
                  description={item.description}
                />
              ))}

我已经实现了更新状态“searchTerm”onChange 的搜索输入。然后我针对一组对象运行这个 searchTerm。这目前有效，并在我搜索时返回实时结果，但是我收到两个 eslint 错误：

期望在箭头函数结束时返回一个值 - 数组回调返回 & 一致返回

我知道这是因为我没有返回过滤器中 if/else 语句之外的任何内容，但是我不知道我还能如何做到这一点。

【问题讨论】：

为什么item.title .toLowerCase() .includes(searchTerm.toLowerCase()) || playlist.description .toLowerCase() .includes(searchTerm.toLowerCase()) 没有返回？阿卡，那是你的问题。 ;)

标签： javascript arrays reactjs

【解决方案1】：

我支持@T.D. Stoneheart 的回答，但您也可以通过减少并摆脱 filter 然后 map 管道来实现相同的目标：

    data.results.reduce((aggElements, entry)=>{
        return yourPredicate(entry) ? [...aggElements, <ReactElement/>] : aggElements;
   }, []}

【讨论】：

在false值中，可以简单的返回数据，而不是浅拷贝。它不仅成本高，而且是多余的，因为您已经使用[]（reduce() 的第二个参数）创建了一个新的数组引用。
@T.D. Stoneheart 好消息，我通常这样做只是为了提醒自己使用不可变模式。不会真正影响感知性能。另外，注意到我忘了输入 aggElements 术语哈哈。

【解决方案2】：

有一个默认分支你没有提供返回值。

                if (searchTerm === '') {
                  return item;
                } else if (
                  return item.title
                    .toLowerCase()
                    .includes(searchTerm.toLowerCase()) ||
                  playlist.description
                    .toLowerCase()
                    .includes(searchTerm.toLowerCase())
                ) {
                  return playlist;
                } else {
                  // return something;
                }

此外，item 和 playlist 似乎是对象，它们不是过滤数组的有用值，因为您应该返回一个布尔值。你可能是说...

?.filter(item => {
  if (searchTerm === '') {
    return true;
  } else if (
    item.title
      .toLowerCase()
      .includes(searchTerm.toLowerCase()) ||
    playlist.description
       .toLowerCase()
       .includes(searchTerm.toLowerCase())
  ) {
    return true;
  } else {
    return false;
  }
})

如果是这样的话，函数可以简化为...

?.filter(item => (
  searchTerm === '' ||
  item.title
    .toLowerCase()
    .includes(searchTerm.toLowerCase()) ||
  playlist.description
     .toLowerCase()
     .includes(searchTerm.toLowerCase())
);

【讨论】：