Js中的if()语句

如何解决Js中的if()语句

这里我有一个搜索组件，我想要实现的是他的。我将如何处理数组中没有项目的情况，我应该做一个 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()

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


    return (
        <div className='search__cont' >   
           <SearchBooks searchValue={searchValue} setSearchValue={setSearchValue 
 }/>     

              {Object.keys(data).filter(filterBooks).length === 0 &&(
               <div>
                <h3>Book not found</h3>
               </div>
                )}
           {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

解决方法

像这样：

return book.length === 0 ? (
    <div>
      <h1>No items has been found </h1>
    </div>
) : (
    <div className='search__books'> ... </div>
);

这称为 ternary operator。如果条件为真，它将返回第一部分，否则将返回第二部分。

编辑：因为你需要一个更完整的例子，大致如下：

function filter() {
  const books = Object.keys(data)
    .map((key) => data[key])
    .reduce((acc,curr) => acc.concat(curr),[])
    .filter(...);

  return books.length ?
    books.map((book) => (
      <div className='search__books' onClick={() => {
        history.push("/book/id",{ book });
        setSearchValue('')
      }}>            
        {" "}
        {book.bookName}{" "}
      </div>            
    ))) : (
      <div>
        <h1>No items has been found </h1>
      </div>
    );
}

return (
  <div className='search__cont' >   
    <SearchBooks searchValue={searchValue} setSearchValue={setSearchValue }/>          
    {filter()}
  </div>
)