React JS 过滤器无法渲染表格数据问题排查

页面加载时表格可正常渲染数据，但操作列上方的过滤输入框时，输入任意值均无数据显示。通过名为filterBySearch的统一函数处理输入框的onChange事件，相关代码如下：

const filterBySearch = (e) => {
  const { name, value } = e.target;
  setFilters({ ...filters, [name]: value });

  //Take copy of current list
  let updatedList = [...data];
  //Filter logic
  updatedList = rows.filter((document) => {
    return (
      document.documentAuthor
        ?.toLowerCase()
        .includes(filters.documentAuthor.toLowerCase()) &&
      document.documentName
        ?.toLowerCase()
        .includes(filters.documentName.toLowerCase()) &&
      document.documentSource
        ?.toLowerCase()
        .includes(filters.documentSource.toLowerCase()) &&
      document.featureId?.includes(filters.featureId)
    );
  });

  // Trigger render with updated values
  setRows(updatedList);
};

问题分析 #

1. 状态更新异步导致取值滞后：setFilters是异步操作，调用后filters不会立刻更新，此时过滤用的还是旧的过滤条件值，无法匹配输入的新内容。
2. 过滤数据源错误：用已经过滤过的rows数组作为过滤基础，多次操作后会导致原始数据丢失，最终无数据可显示。
3. 空值未做兼容处理：当输入框为空时，若filters对应字段未初始化或目标字段为null/undefined，调用toLowerCase()会触发报错，直接导致过滤结果为空。

修复方案 #

const filterBySearch = (e) => {
  const { name, value } = e.target;
  // 先生成最新的过滤条件对象
  const newFilters = { ...filters, [name]: value };
  setFilters(newFilters);

  // 基于原始数据源data进行过滤，保证每次过滤都是完整数据集
  const updatedList = data.filter((doc) => {
    // 每个过滤条件单独判断，空值时跳过该条件
    const matchAuthor = !newFilters.documentAuthor || 
      doc.documentAuthor?.toLowerCase().includes(newFilters.documentAuthor.toLowerCase());
    const matchName = !newFilters.documentName || 
      doc.documentName?.toLowerCase().includes(newFilters.documentName.toLowerCase());
    const matchSource = !newFilters.documentSource || 
      doc.documentSource?.toLowerCase().includes(newFilters.documentSource.toLowerCase());
    const matchFeatureId = !newFilters.featureId || 
      doc.featureId?.includes(newFilters.featureId);

    return matchAuthor && matchName && matchSource && matchFeatureId;
  });

  setRows(updatedList);
};

修复说明 #

• 使用最新过滤条件：直接用刚创建的newFilters进行过滤，避开React状态更新的异步特性，确保过滤逻辑用的是当前输入的最新值。
• 基于原始数据过滤：始终从data数组获取完整数据，避免多次过滤导致数据被逐步清空。
• 空值兼容处理：当过滤输入框为空时，对应条件自动返回true，不参与过滤判断；同时用可选链?.避免字段为null/undefined时的报错。

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