将过滤器和地图重构为搜索栏的部分

Question

我有一个搜索栏组件。我想知道如何重构下面的代码，以便在没有匹配项时包含要显示的 html 标记。现在，如果匹配则显示标记，如果为空白则不显示标记。

我在分离过滤器和地图功能时遇到错误。

`返回（

    {
    bookList.filter(book => {
        let isMatched = (book.title.toLowerCase().includes(query.toLowerCase()));

        if (query === '') {
            return ;
        } else if (isMatched) {
            return book;
        }
    }).map((book, index) => (
        <div>           
        This is the book   
        </div>
    ))
    }
</div>

) };`

我在分离过滤器和地图功能时遇到错误。

先做过滤，把结果赋给一个变量。检查 .length 是否为零，如果为零，则返回您未找到任何书籍的标记。否则返回找到的书籍列表。例如

let filteredBooks = bookList.filter(book => 
  book.title.toLowerCase().includes(query.toLowerCase())
);

if (filteredBooks.length === 0) {
  return <div>No books</div>;
} else {
  return books.map(book => <div>{{book.title}}</div>);
}

Answer 1

先做过滤，把结果赋给一个变量。检查 .length 是否为零，如果为零，则返回您未找到任何书籍的标记。否则返回找到的书籍列表。例如

let filteredBooks = bookList.filter(book => 
  book.title.toLowerCase().includes(query.toLowerCase())
);

if (filteredBooks.length === 0) {
  return <div>No books</div>;
} else {
  return books.map(book => <div>{{book.title}}</div>);
}