如何使用ReactJS和Redux筛选列表中的项目？

我正在呈现一个元素列表并进行分页，列表的每一页包含3个元素

我正在插入一个``字段，用户可以在其中过滤他想要的任何产品。过滤器正在工作。问题是它只过滤当前页面上的项目

例如，如果我搜索列表第2页上的产品，则该产品不会出现

你能告诉我怎么解决这个问题吗

因为我使用了很多文件，所以我将代码放入

---

提前感谢。

您遇到的问题是在筛选数据之前对数据进行分页

所以，我继续修改代码，进行过滤，然后分页。我使用

usemo

hook对它进行了过滤，因为在一个大列表上进行过滤可能会很昂贵

  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);