要素のリストをレンダリングしてページネーションを行っています。リストの各ページには3つの要素が含まれています。
ユーザーが必要な製品をフィルタリングできる ``フィールドを挿入しています。フィルタは機能しています。問題は、現在のページのアイテムのみをフィルタリングしていることです。
たとえば、リストの2ページにある商品を検索しても、その商品は表示されません。
これを修正する方法を教えてください。
多くのファイルを使用しているので、コードをcodesandboxに入れます
前もって感謝します。
発生した問題は、データをフィルタリングする前にページ付けしていたことでした。
そこで、先に進み、コードを変更してフィルタリングしてからページ付けしました。useMemo大きなリストでフィルタリングを行うとコストがかかる可能性があるため、フックを使用してフィルタリングしました。
const [searchPerfume, setSearchPerfume] = useState("");
// Filter the data based on the search string
const filteredPerfumes = useMemo(() => {
return data.filter((perfume) =>
perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
);
}, [data, searchPerfume]);
// Paginate the data
const [currentPage, setCurrentPage] = useState(1);
const [perfumesPerPage, setPerfumesPerPage] = useState(3);
const currentPerfumes = filteredPerfumes.slice(
(currentPage-1) * perfumesPerPage,
currentPage * perfumesPerPage
);
const pages = Math.ceil(filteredPerfumes.length / perfumesPerPage);
// Reset current page if there are fewer pages than the current page
useEffect(() => {
if (currentPage > pages) {
setCurrentPage(1);
}
}, [currentPage, pages]);
// Get the range of pages in an array
const pageNumbers = Array(pages)
.fill(null)
.map((val, index) => index + 1);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加