如何在react hooks中显示无效搜索的错误消息?

Question

下面的代码将从mongoDB检索公司详细信息并以表格式显示它们。此外，我还放置了一个搜索栏，人们可以在其中使用公司名称搜索公司，我使用react hooks来实现此功能。我想知道如何为无效搜索显示错误消息，而不是在进行无效搜索时显示空表。

import React, {useEffect, useState}  from "react";
import GridWrapper from "../helpers/gridWrapper";
import ContentWrapper from "../helpers/contentWrapper";
import Popup from "./contacts/popupTemplate";
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import ViewIcon from "@material-ui/icons/EditOutlined";
import "./stylesheets/contacts.css"
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { getCompanies } from "../redux/actions/companyAction";

const Contacts = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getCompanies());
},[dispatch]);
const { companies } = useSelector(state => state.companies);
//for popup management
const [buttonPopup, openPopup] = useState(false);
let count = 1;
const[search, setSearch] = useState("");
const filteredCompanies = companies.filter(company=>{
return company.companyName.toLowerCase().includes(search.toLowerCase())
})
return (
<GridWrapper>
<ContentWrapper>
<div>
<input 
type="text" 
placeholder="Search Contacts" 
class="boxContainer"
onChange={e => setSearch(e.target.value)}>
</input>
</div> 
<Popup trigger={buttonPopup} setTrigger={openPopup}>
<div className="row">
<div className="column1">
<h4>
Details of Client
</h4>
<div className="column1-part1">
<div className="column1-part1-column">
Id : 10235
<br></br>
Name : John Smith
<br></br>
Company Name : Company ABC
</div>
<div className="column1-part1-column2">
Contact Number : 0774410398
<br></br>
Company Telephone : [phone]
<br></br>
Email : [e-mail]
</div>
</div>
<div className="column1-part2">
Client Job : Sales Head
<br></br>
Client NIC : 1958426712V
<br></br>
Client Address : No 15, First lane, Colombo
<br></br>
Client DOB : 25th June 2021
<br></br>
Client Gender : Male
</div>
<div className="column1-part3">
Company Address : No 15, First lane, Colombo
<br></br>
Company Registration Number : 256364125895
</div>
</div>
<div className="column2">
<button className="ClientEditBtn">
<EditIcon></EditIcon>
</button>
<button className="ClientDeleteBtn">
<DeleteIcon></DeleteIcon>
</button>
<h5>
Current Projects
</h5>
<p>
Project 1 - 25/06/2021
<br></br>
Project 256 - 27/06/2022
<br></br>
Project 256 - 27/06/2022
<br></br>
Project 256 - 27/06/2022
</p>
</div>
</div>
</Popup>

<div class="table-box">
<table>
<thead>
<tr>
<th>No.</th>
<th>Registration No.</th>
<th>Company Name</th>
<th>Company Address</th>
<th></th>
</tr>
</thead>
<tbody>
{filteredCompanies.map(company =>(
<tr>
<td>{count++}</td>
<td>{company.companyRegNumber}</td>
<td>{company.companyName}</td>
<td>{company.companyAddress}</td>
<td><button onClick={() => openPopup(true)}  class="btn-view"><ViewIcon/>View</button></td>
</tr>
))}
</tbody>
</table>
</div>
</ContentWrapper>
</GridWrapper>
);
};
export default Contacts;

Answer 1

如果您从jsx中取出这段代码:

<tbody>
{filteredCompanies.map(company =>(
<tr>
<td>{count++}</td>
<td>{company.companyRegNumber}</td>
<td>{company.companyName}</td>
<td>{company.companyAddress}</td>
<td><button onClick={() => openPopup(true)}  class="btn-view"><ViewIcon/>View</button></td>
</tr>
))}
</tbody>

你可以这样修改:

{filteredCompanies?.length >0? 
<tbody>
{filteredCompanies.map(company =>(
<tr>
<td>{count++}</td>
<td>{company.companyRegNumber}</td>
<td>{company.companyName}</td>
<td>{company.companyAddress}</td>
<td><button onClick={() => openPopup(true)}  class="btn-view"><ViewIcon/>View</button></td>
</tr>
))}
</tbody>
: <div> <i>No companies found.</i> </div>}

内联条件将呈现您的tbody，如果过滤的公司不为空，或显示"No companies found"消息。