Javascript 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

import React，{useState，useffect，useRef，useContext}来自“React”
从'react icons/fa'导入{FaSearch}
导入{
链接，使用历史记录
}从“反应路由器dom”；
从“../../context/books”导入{BookContext}；
从“./SearchBooks”导入搜索簿；
常量搜索=（）=>{
const{data}=useContext（BookContext）
常量[searchValue，setSearchValue]=React.useState（“”）；
const history=useHistory（）
功能过滤器书籍（书籍）{
控制台。日志（簿）；
如果（！searchValue.length）返回book.bookName>10
如果（！searchValue.length）返回false；
return book.bookName？.toLowerCase（）.includes（searchValue.toLowerCase（））；
}
返回(
{Object.keys（data）.filter（filterBooks）.length==0&&(
找不到书
)}
{Object.keys（数据）
.map（（键）=>数据[键]）
.减少（（会计科目，当前）=>会计科目（当前），[]）
.过滤器（过滤器书籍）
.map（（书）=>{
返回(
{
history.push（“/book/id”，{book}）；setSearchValue（“”）
}}
>            
{" "}
{book.bookName}{”“}
);
})}
)
}
导出默认搜索

类似这样的内容：

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

returnbook.length==0？(
没有找到任何项目
) : (
... 
);

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

编辑：由于您需要一个更完整的示例，请参见以下内容：

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>
)

函数过滤器（）{
const books=Object.keys（数据）
.map（（键）=>数据[键]）
.减少（（会计科目，当前）=>会计科目（当前），[]）
.过滤器（…）；
还书。长度？
图书。地图（（图书）=>(
{
history.push（“/book/id”，{book}）；
设置搜索值（“”）
}}>            
{" "}
{book.bookName}{”“}
))) : (
没有找到任何项目
);
}
返回(
{filter（）}
)

我得到的一本书没有定义，这是因为

这本书不在范围之内。在您的示例中也不在范围内。我知道它不在范围内，我应该如何在范围内更新答案，希望这能给您提供一个更完整的图片。当然，它会显示出来，但您的解决方案意味着您正在执行
对象。键…
，无论是什么，因为您没有正确使用条件。