对来自 API 的迭代数据实现搜索功能

Question

所以我创建了我正在处理的东西的沙箱https://codesandbox.io/s/charming-hellman-h9yqg 基本上我在这里从 API 获取数据，我已经迭代了 Book Component 中的数据，我还在组件/HoverBooks 中链接了这让我详情页/书。我已经迭代了搜索组件中的数据。我正在尝试实现 bookNames 的搜索功能，当他们按下它时，会将我推到 DetailsPage/Book。如果沙盒有问题，请发表评论。谢谢

Answer 1

我发现您为过滤功能准备数据的方式有些麻烦。关键代码是

function filterBooks(book) {
    console.log(book);
    if (!searchValue.length) return true;
    return book.bookName?.toLowerCase().includes(searchValue.toLowerCase());
  }
  return (
    <div>
      {Object.keys(data)
        .map((key) => data[key])
        .reduce((acc, curr) => acc.concat(curr), [])
        .filter(filterBooks)
        .map((book) => {
          return (
            <>
              <div
                onClick={() => {
                  history.push("/book/id", { book });
                }}
              >
                {" "}
                {book.bookName}{" "}
              </div>
            </>
          );
        })}

https://codesandbox.io/s/affectionate-pine-pbchq?file=/src/Book.js

已修复！