如何实现支持用户输入多条件联合过滤数据的React高级搜索页

问题根因 #

你当前代码只能实现单条件过滤的核心原因是过滤逻辑使用了或（||）运算，只要任意一个筛选条件匹配就会保留数据，同时存在两个隐藏问题：

1. 未处理空参数场景：如果某个筛选条件未填写（值为空字符串），value.name === ''这类判断会直接过滤掉所有数据
2. 打平数据时缺失关联字段：你用到的districtName、type字段在原始条目里不存在，需要从上层结构继承

实现方案 #

将过滤逻辑改成与（&&）运算，仅当所有非空的筛选条件都匹配时才保留数据，同时补全打平数据时缺失的字段即可，修改后的FilterSearchButton代码如下：

const FilterSearchButton = ({ name, category, district, status, serialNumber, setFilterButtonValue }) => {
  const [multiFilter, setMultiFilter] = useState([]);

  useEffect(() => {
    // 先打平数据，同时补全缺失的关联字段
    const allItems = dummyData.flatMap(districtItem => 
      districtItem.ward_no.flatMap(wardItem => 
        ['grievances', 'general', 'urgent', 'services'].flatMap(type => 
          // 兼容不存在的字段，避免报错
          (wardItem[type] || []).map(item => ({
            ...item,
            districtName: districtItem.district, // 继承上层的地区字段
            type: type // 继承当前条目所属的类别
          }))
        )
      )
    );

    // 多条件联合过滤：非空条件必须全部匹配
    const filtered = allItems.filter(item => {
      return (
        (name ? item.name === name : true) &&
        (district ? item.districtName === district : true) &&
        (category ? item.type === category : true) &&
        (status ? item.status === status : true) &&
        (serialNumber ? item.serial_number === serialNumber : true)
      );
    });

    setMultiFilter(filtered);
  }, [name, category, district, status, serialNumber]);

  const searchFilter = () => {
    setFilterButtonValue(multiFilter);
  };

  return (
    <div className="searchFilterButton" onClick={searchFilter}>搜索</div>
  );
};

export default FilterSearchButton;

可选优化 #

如果需要支持模糊搜索（比如输入姓名的部分字符就能匹配），可以把全等判断===改成includes，同时统一大小写避免匹配失败，示例：

// 姓名模糊匹配示例
(name ? item.name.includes(name.trim()) : true)
// 不区分大小写的模糊匹配
(name ? item.name.toLowerCase().includes(name.trim().toLowerCase()) : true)

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