在搜索工作人员姓名后，我一直在尝试添加“未找到记录”消息。但我一直没有成功。我要么收到 20 条“未找到记录”消息，要么根本没有。我不确定自己做错了什么，但过去 4 小时我一直在尝试各种方法和变通方法。
我知道这应该很容易实现，但一直很困难。 这是我在代码沙箱上的代码的链接：https://codesandbox.io/s/fe-hatc-ass-search-n62kw?file=/src/App.js
任何见解都会有所帮助.... 我尝试过的事情是，if else 语句，逻辑运算符......等等......
【问题讨论】：
标签： javascript reactjs react-hooks jsx searchbar
查看您的代码，问题在于您在每个单独的 <Order> 组件中进行过滤。过滤应该在父 Orders 组件中完成，如果找到匹配项，您应该只渲染 <Order> 组件。
目前，您的 <Order> 组件正在渲染，即使没有匹配项。
【讨论】：
您可以在 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 中更安全，这样更容易查看是否缺少依赖项。
【讨论】：
在我看来，您首先需要考虑的是您需要哪些数据以及何时需要这些数据。要不显示您想要的结果，您将需要正在执行过滤的组件中的工作人员名称。因此，您需要在订单组件中使用它。我会将工作人员数据与订单数据合并，然后您可以在此之后过滤和操作数据。这也将阻止您在每次有人更改输入时发出 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;
【讨论】：