19、数据过滤与搜索功能的实现与优化

数据过滤与搜索功能的实现与优化

在开发过程中，数据的过滤和搜索功能是常见且重要的需求。本文将详细介绍如何实现一个包含分页、过滤和搜索功能的组件，并通过测试驱动开发（TDD）的方式对其进行优化，同时还会涉及渲染属性（render props）的使用和测试。

1. 分页功能实现

1.1 下一页按钮实现

最初的 handleNext 和 fetchData 函数存在代码重复问题。为了解决这个问题，我们引入了一个新的状态变量 queryString ，并对代码进行了重构。
- 添加状态变量 ：

const [queryString, setQueryString] = useState("");

• 修改 handleNext 函数 ：

const handleNext = useCallback(() => {
  const after = customers[customers.length - 1].id;
  const newQueryString = `?after=${after}`;
  setQueryString(newQueryString);
}, [customers]);