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;

标签： react-hooks

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"消息。