React中HTML表格列级搜索筛选的回退功能问题求助

问题根源 #

你现在的核心问题是用筛选后的数据覆盖了原始数据源——每次列搜索时都直接修改searchData，导致原始全量数据丢失。后续退格或清空搜索值时，没有完整的数据源可以重新筛选，自然无法恢复全量数据。

解决方案 #

核心思路是保留一份不可修改的原始全量数据，所有筛选操作都基于这份原始数据重新计算，而不是在已过滤的数据上二次过滤：

• 新增一个状态专门存储接口返回的原始全量数据，比如originalData，接口请求成功后同时初始化originalData和searchData。
• 当列搜索值或目标列变化时，从originalData开始执行过滤逻辑，把结果赋值给searchData用于渲染。

代码调整示例 #

// 初始化状态时新增原始数据存储
const [originalData, setOriginalData] = useState([]);
const [searchData, setSearchData] = useState([]);

// 接口请求成功后，同时保存原始数据和初始渲染数据
const fetchData = async () => {
  const response = await fetch(/* 你的API地址 */);
  const data = await response.json();
  setOriginalData(data); // 存原始全量数据，永远不修改
  setSearchData(data); // 初始渲染用全量数据
};

// 修改列搜索处理逻辑
const handleColumnSearchChange = () => {
  let result = [...originalData];
  // 只有当有搜索值和目标列时才过滤
  if (context.SearchValue.trim() && context.columnTypedInto) {
    const searchVal = context.SearchValue.toLowerCase();
    result = result.filter(item => {
      const cellValue = item[context.columnTypedInto]?.toString().toLowerCase();
      return cellValue?.includes(searchVal);
    });
  }
  setSearchData(result);
};

这样调整后，不管是按下退格键逐步修改搜索值，还是清空搜索框，都会重新从原始全量数据出发执行过滤，就能正确恢复对应的数据了，和你期望的效果一致。

内容的提问来源于stack exchange，提问作者manish thakur