"预期在箭头函数末尾返回一个值" - 除了过滤器之外，还有其他方法可以做到这一点吗？

Question

这是我的代码-

{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错误:

期望在箭头函数结束时返回一个值- array-callback-return &一致的回报

我知道这是因为我在过滤器内的if/else语句之外没有返回任何东西，但是我不知道我还能怎么做。

Answer 1

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

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())
);

Answer 2

我支持@ t.d.。石心的答案，但你也可以实现同样的事情与减少和摆脱filter然后map管道:

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