Блог

Я создал фильтр поиска, который выглядит следующим образом:

 const booksrow = books amp;amp; books.map(book=>{
 if(pattern.test('all')||pattern.test(book.genre.toLowerCase())||pattern.test(book.title.toLowerCase())||pattern.test(book.author.toLowerCase())){
  return <Book  book={book} books={books}/>
}
})
 

Когда я просматриваю массив и просто фильтрую его на основе определенных требований, проблема, с которой я сталкиваюсь, заключается в том, что я хотел бы вернуть сообщение по умолчанию, если из этого фильтра ничего не возвращается.
Например, я попытался сделать

  const booksrow = books amp;amp; books.map(book=>{
if(pattern.test('all')||pattern.test(book.genre.toLowerCase())||pattern.test(book.title.toLowerCase())||pattern.test(book.author.toLowerCase())){
  return <Book  book={book} books={books}/>
}else {
 return 'Default message'
 }
})
 

Но это не сработает, потому что оно вернет это сообщение по умолчанию, основанное на карте.

Используйте filter вместо map , затем вы можете проверить, является ли отфильтрованный массив пустым или нет:

 const filtered = books
    ?.filter(book => (
        pattern.test('all') ||
        ['genre', 'title', 'author'].some(prop => pattern.test(book[prop].toLowerCase()))
    ))
    .map(book => <Book book={book} books={books} />);
const booksRow = filtered?.length ? filtered : 'Default message';