在 React 中运行搜索后如何显示“未找到记录”

Posted 2023-02-21

【中文标题】在 React 中运行搜索后如何显示“未找到记录”

【英文标题】：How to display "no records found" after running a search in React

【发布时间】：2021-12-05 23:25:21

【问题描述】：

在搜索工作人员姓名后，我一直在尝试添加“未找到记录”消息。但我一直没有成功。我要么收到 20 条“未找到记录”消息，要么根本没有。我不确定自己做错了什么，但过去 4 小时我一直在尝试各种方法和变通方法。

我知道这应该很容易实现，但一直很困难。 这是我在代码沙箱上的代码的链接：https://codesandbox.io/s/fe-hatc-ass-search-n62kw?file=/src/App.js

任何见解都会有所帮助.... 我尝试过的事情是，if else 语句，逻辑运算符......等等......

【参考方案1】：

查看您的代码，问题在于您在每个单独的 <Order> 组件中进行过滤。过滤应该在父 Orders 组件中完成，如果找到匹配项，您应该只渲染 <Order> 组件。

目前，您的 <Order> 组件正在渲染，即使没有匹配项。

【参考方案2】：

您可以在 Orders.js 中添加一个状态来计算正在呈现的商品数量。但是，由于每个 Worker 都依赖于一个 api 调用，因此您需要让响应（getWorker，在 Workers.js 中）等待响应才能进行计数。每次输入值改变时，你应该将计数器重置为 0。

https://codesandbox.io/s/fe-hatc-ass-search-forked-elyjz?file=/src/Worker.js:267-276

另外，作为注释，将运行在 useEffect 中的函数放在 useEffect 中更安全，这样更容易查看是否缺少依赖项。

【参考方案3】：

在我看来，您首先需要考虑的是您需要哪些数据以及何时需要这些数据。要不显示您想要的结果，您将需要正在执行过滤的组件中的工作人员名称。因此，您需要在订单组件中使用它。我会将工作人员数据与订单数据合并，然后您可以在此之后过滤和操作数据。这也将阻止您在每次有人更改输入时发出 api 请求，而您需要做的就是过滤已经获取的数据。然后您可以检查数组长度，如果它大于 0，则可以显示结果，否则显示无结果语句。

类似以下内容：

订单组件

import React,  useEffect, useState  from "react";
import "./Orders.css";
import Order from "./Worker";
import axios from "axios";

const Orders = () => 
  const [orders, setOrders] = useState([]);
  const [results, setResults] = useState([]);
  const [searchedWorker, setSearchedWorker] = useState("");

  const getOrders = async () => 
    const workOrders = await axios.get(
      "https://api.hatchways.io/assessment/work_orders"
    );
    const mappedOrders = await Promise.all(workOrders.data.orders.map(async order => 
      const worker = await axios.get(
        `https://api.hatchways.io/assessment/workers/$order.workerId`
      );
      return ...order, worker: worker.data.worker
    ))
    setOrders(mappedOrders);
  ;

  useEffect(() => 
    getOrders();
  , []);

  useEffect(() => 
    const filtered = orders.filter(order => order.worker.name.toLowerCase().includes(searchedWorker));
    setResults(filtered)
  , [searchedWorker, orders])

  return (
    <div>
      <h1>Orders</h1>
      <input
        type="text"
        name="workerName"
        id="workerName"
        placeholder="Filter by workername..."
        value=searchedWorker //property specifies the value associated with the input
        onChange=(e) => setSearchedWorker(e.target.value.toLowerCase())
        //onChange captures the entered values and stores it inside our state hooks
        //then we pass the searched values as props into the component
      />

      <p>Results: results.length</p>

      results.length > 0 ? results.map((order) => (
        <Order key=order.id lemon=order />
      )) : <p>No results found</p> 
    </div>
  );
;
//(if this part is true) && (this part will execute)
//is short for: if(condition)(this part will execute)
export default Orders;

然后你可以简化你的单订单组件

import React from "react";

const Order = ( lemon ) => 
  return (
    <div>
      <div className="order">
        <p>Work order lemon.id</p>
        <p>lemon.description</p>
        <img src=`$lemon.worker.image`  />
        <p>lemon.worker.name</p>
        <p>lemon.worker.company</p>
        <p>lemon.worker.email</p>
        <p>new Date(lemon.deadline).toLocaleString()</p>
      </div>
    </

div>
  );
;

export default Order;

【讨论】：

谢谢！实际上，我之前已经将其设置为类似于此，分为两个 api 搜索.....感谢您使它对我有意义...经过几天尝试了解过滤器/排序过程后，我绝对理解了现在更多。