如何使用 ReactJS 和 Redux 过滤列表中的项目？答案

【问题标题】：How to filter items in a list with ReactJS and Redux?如何使用 ReactJS 和 Redux 过滤列表中的项目？
【发布时间】：2020-10-10 09:05:14
【问题描述】：

我正在渲染一个元素列表并进行分页，我的列表的每一页都包含 3 个元素。

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

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

你能告诉我如何解决这个问题吗？

由于我使用了很多文件，我将代码放入codesandbox

提前致谢。

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

您遇到的问题是您在过滤数据之前对其进行了分页。

所以，我继续修改代码以过滤然后分页。我使用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);

Working codesandbox

【讨论】：