在 JS/React 中过滤数组

Question

所以这里我有搜索功能。除非在数组中找不到 Item ，否则一切正常。我已经尝试过使用 objects.Keys 的东西，但它在渲染上显示它，而不是在没有像它应该的那样找到 Book 时显示它。我应该使用 if 语句还是。

import React,{useState, useEffect, useRef, useContext}from 'react'
import {FaSearch} from 'react-icons/fa'
import { 
    Link, useHistory
  } from "react-router-dom";
import { BookContext } from '../../context/books';
import SearchBooks from './SearchBooks';

const Search = () => {

  const {data}= useContext(BookContext)
  const [searchValue, setSearchValue] = React.useState('');
  const history= useHistory()
  const ref=useRef()

  function filterBooks(book) {
    console.log(book);
    if (!searchValue.length  ) return false;
    return book.bookName?.toLowerCase().includes(searchValue.toLowerCase());
  }

  const handleSearch = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
     setSearchValue('')
    }
  };
     
  useEffect(() => {
    document.addEventListener('click', handleSearch);
    return () => {
      document.removeEventListener('click', handleSearch);
    };
  }, []);
  

  
        return (
        <div className='search__cont' ref={ref}>   
              {Object.keys(data).filter(filterBooks).length === 0 &&(
           <div>
             <h3>Book not found</h3>
             </div>
         )}
           <SearchBooks searchValue={searchValue} setSearchValue={setSearchValue }/>          
           {Object.keys(data)
             .map((key) => data[key])
             .reduce((acc, curr) => acc.concat(curr), [])
             .filter(filterBooks)
             .map((book) => {          
             return (
             <>       
              <div  className='search__books'
                onClick={() => {
                  history.push("/book/id", { book }); setSearchValue('')
                }}
               >            
                {" "}
                {book.bookName}{" "}
              </div>            
            </>
          );
        })}
           </div>
    )
}

export default Search

Answer 1

您正在过滤类别名称而不是书籍（data 是一个以类别名称作为键，书籍作为值的对象）。您可以使用Object.values 和Array.prototype.flat 获取所有书籍的数组，然后应用过滤器。

const filteredBooks = Object.values(data).flat().filter(filterBooks)
const searchQueryPresent = searchValue.trim().length > 0

{
  searchQueryPresent &&
    (filteredBooks.length === 0 ? (
      <div>No books found</div>
    ) : (
      filteredBooks.map((book) => {
        return <>{/* render books */}</>
      })
    ))
}