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

Question

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

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

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

标签： javascriptreactjsreact-hooksjsxsearchbar

Answer 1

在我看来，您需要考虑的第一件事是您需要什么数据以及何时需要它。要不显示您想要的结果，您将需要正在执行过滤的组件中的工作人员名称。因此，您需要在订单组件中使用它。我会将工作人员数据与订单数据合并，然后您可以在此之后过滤和操作数据。这也将阻止您在每次有人更改输入时发出 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}`} alt="worker" />
        <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;