我有一個從 MySQL 表中獲取行的搜索組件。它會過濾掉任何與搜索查詢不匹配的表行的結果。如果沒有找到結果，我想顯示錯誤或顯示找到的結果數。
例如：如果用戶搜索“a”，他們可能會看到“找到 10 個結果”，10 是表中包含“a”的行數。
我嘗試使用三元運算子和控制臺記錄用作id特定表行 ( row.name) 的查詢 () 的變數來實作此目的，但我無法找到正確的變數以用作三元運算子的引數。
因此，如果用戶的查詢與表中的任何行都不匹配，我想知道如何重組組件以顯示錯誤的任何建議。
這是組件
import React, {useState, useEffect} from 'react';
import { useParams } from "react-router-dom";
import Helmet from 'react-helmet';
import axios from 'axios';
export default function Results() {
//Extracts ID from URL
const {id} = useParams();
const [rows, setRows] = useState([]);
useEffect(() => {
axios.get('http://localhost:8080/products/get/')
.then(res => {
setRows(res.data);
}).catch(err => {
console.log(err);
});
});
return (
<>
<Helmet>
<title>website title | {id}</title>
</Helmet>
<div class="py-16 max-w-[1200px] mx-5 lg:mx-auto">
<h1 class="text-xl font-medium tracking-wide italic text-gray-400">Showing results for: {id}</h1>
<div class="w-full flex space-x-10 mt-8">
<div class="w-1/4 p-5 rounded border">
sidebar
</div>
<div class="mt-5 w-3/4">
<div class="flex space-x-10">
<div class="border rounded">Sort by: </div>
<div class="border rounded">Product per page:</div>
</div>
{rows
.sort((a, b) => a.name.localeCompare(b.name)) //Sorts alphabetically
.filter(row => row.name.toLowerCase().includes(id.toLowerCase())) //Filters matching letters by ID
//Maps results
.map((row, index) => {
return (
<div key={index}>
<p>{row.name}</p>
<img src={row.image} alt="Image of product" class="w-[250px] h-auto" />
</div>
)
})
}
</div>
</div>
</div>
</>
);
};
uj5u.com熱心網友回復：
您可以將查詢結果保存到狀態并將過濾的行保存到物件
const [error, setError] = useState(null);
useEffect(() => {
axios.get('http://localhost:8080/products/get/')
.then(res => {
setRows(res.data);
}).catch(err => {
console.log(err);
setError(err);
});
});
const filteredRows = rows.sort((a, b) => a.name.localeCompare(b.name))
.filter(row => row.name.toLowerCase().includes(id.toLowerCase()))
return (
// ...
<div>{`${filteredRows.length} results found`}</div>
<div>{error || !rows.length ? 'No data' : filteredRows.map( // ...) }</div>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/527801.html