在React中運行搜索后如何顯示“未找到記錄”

在搜索作業人員姓名后，我一直試圖添加“未找到記錄”訊息。但我沒有成功。我要么收到 20 條“未找到記錄”訊息，要么根本沒有。我不確定我做錯了什么，但過去 4 個小時我一直在嘗試各種方法和變通方法。

我知道這應該很容易實作，但一直很困難。這是我在codesandbox上的代碼的鏈接：https ://codesandbox.io/s/fe-hatc-ass-search-n62kw ? file =/ src/App.js

任何見解都會有所幫助......我嘗試過的事情是，if else 陳述句，邏輯運算子......等等......

uj5u.com熱心網友回復：

查看您的代碼，問題在于您正在每個單獨的<Order>組件中進行過濾。過濾應該在父Orders組件中完成，<Order>如果找到匹配項，您應該只渲染組件。

目前，您的<Order>組件正在渲染，即使沒有匹配項。

uj5u.com熱心網友回復：

您可以在 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 內部更安全，這樣更容易查看是否缺少依賴項。

uj5u.com熱心網友回復：

在我看來，您需要考慮的第一件事是您需要什么資料以及何時需要它。為了不顯示您想要的結果，您將需要在進行過濾的組件中使用工人名稱。所以你需要在訂單組件中使用它。我會將作業人員資料與訂單資料合并，然后您可以在此之后過濾和操作資料。這也會阻止您在每次有人更改輸入時發出 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;

標籤：javascript 反应 反应钩子 jsx 搜索栏

上一篇：回圈中的混亂

下一篇：單擊選項卡標題時顯示和隱藏div