React 中使用多条件过滤数组的正确姿势
在React项目开发中，我们经常需要根据多个用户输入的条件，对数组数据进行筛选过滤，比如商品列表的筛选、用户列表的查询等场景。很多新手一开始会写嵌套的条件判断，或者把过滤逻辑写得很零散，导致代码可维护性差，甚至出现过滤逻辑出错的问题。本文将介绍几种规范的多条件过滤数组的实现方式，帮助大家写出更清晰的React过滤逻辑。
基础场景：固定多条件过滤
假设我们有一个商品列表数据，每个商品包含名称、分类、价格三个属性，现在需要根据用户输入的商品名称关键词、选中的分类、价格区间三个条件来过滤商品。首先我们先定义基础的数据结构和状态：
// 商品数据结构示例
const goodsList = [
{ id: 1, name: '无线鼠标', category: '数码配件', price: 89 },
{ id: 2, name: '机械键盘', category: '数码配件', price: 299 },
{ id: 3, name: '纯棉T恤', category: '服装', price: 59 },
{ id: 4, name: '运动短裤', category: '服装', price: 79 },
{ id: 5, name: '保温杯', category: '生活用品', price: 49 }
];
// React组件中的状态定义
const [searchName, setSearchName] = useState(''); // 商品名称搜索关键词
const [selectedCategory, setSelectedCategory] = useState(''); // 选中的分类，空字符串表示全部分类
const [minPrice, setMinPrice] = useState(''); // 最低价格，空字符串表示不限制
const [maxPrice, setMaxPrice] = useState(''); // 最高价格，空字符串表示不限制接下来我们实现过滤逻辑，核心是使用数组的filter方法，在回调函数中叠加多个条件判断。这里要注意，每个条件都要做非空判断，避免空条件干扰过滤结果：
// 多条件过滤逻辑
const filteredGoods = goodsList.filter(item => {
// 1. 商品名称关键词过滤，当searchName为空时不过滤
const matchName = searchName === '' || item.name.includes(searchName);
// 2. 分类过滤，当selectedCategory为空时不过滤
const matchCategory = selectedCategory === '' || item.category === selectedCategory;
// 3. 价格区间过滤，处理最低价和最高价的边界情况
const price = item.price;
const matchMinPrice = minPrice === '' || price >= Number(minPrice);
const matchMaxPrice = maxPrice === '' || price <= Number(maxPrice);
// 所有条件都满足才返回true，保留当前项
return matchName && matchCategory && matchMinPrice && matchMaxPrice;
});这种写法的好处是每个过滤条件独立判断，逻辑清晰，后续如果要新增其他过滤条件，只需要在filter回调中新增对应的判断逻辑即可，不会影响现有逻辑。
进阶场景：动态条件数组过滤
如果过滤条件不是固定的，而是动态生成的，比如用户可以自定义添加多个过滤规则，这时候用上面的硬编码方式就不太合适了，我们可以把过滤条件抽象成数组，循环执行所有条件：
// 定义动态过滤条件数组，每个元素是一个过滤函数
const filterConditions = [];
// 根据用户输入动态添加过滤条件
if (searchName !== '') {
filterConditions.push(item => item.name.includes(searchName));
}
if (selectedCategory !== '') {
filterConditions.push(item => item.category === selectedCategory);
}
if (minPrice !== '') {
filterConditions.push(item => item.price >= Number(minPrice));
}
if (maxPrice !== '') {
filterConditions.push(item => item.price <= Number(maxPrice));
}
// 执行过滤：只有当所有过滤条件都满足时，才保留当前项
const filteredGoods = goodsList.filter(item => {
return filterConditions.every(condition => condition(item));
});这种方式的可扩展性更强，如果后续需要新增过滤条件，只需要在合适的时机往filterConditions数组中添加对应的过滤函数即可，不需要修改核心的过滤执行逻辑。
结合React hooks优化性能
在React函数组件中，如果过滤逻辑依赖的状态比较多，每次状态变化都会重新计算过滤结果，当数据量较大时可能会出现性能问题。我们可以使用useMemo来缓存过滤结果，只有当依赖的状态发生变化时才重新计算：
import { useMemo } from 'react';
// 使用useMemo缓存过滤结果，依赖项为所有参与过滤的状态
const filteredGoods = useMemo(() => {
return goodsList.filter(item => {
const matchName = searchName === '' || item.name.includes(searchName);
const matchCategory = selectedCategory === '' || item.category === selectedCategory;
const price = item.price;
const matchMinPrice = minPrice === '' || price >= Number(minPrice);
const matchMaxPrice = maxPrice === '' || price <= Number(maxPrice);
return matchName && matchCategory && matchMinPrice && matchMaxPrice;
});
}, [searchName, selectedCategory, minPrice, maxPrice, goodsList]); // 依赖项要包含所有用到的状态和数据这里要注意useMemo的依赖项数组要写全，否则可能会出现过滤结果不更新的问题。如果goodsList是组件内部定义的固定数据，也可以不用放到依赖项中，如果是从接口获取的动态数据，就必须加入依赖项。
常见错误规避
在写多条件过滤逻辑时，新手经常会犯几个错误，这里给大家提个醒：
- 忘记做空值判断：比如用户没有输入搜索关键词时，条件直接判断
item.name.includes(searchName)，此时searchName是空字符串，所有商品的名称都会包含空字符串，虽然结果看起来没问题，但如果后续逻辑调整很容易出问题，建议还是显式判断空值。 - 价格比较不做类型转换：输入框获取的价格值是字符串类型，直接和数字类型的
item.price比较会得到错误结果，一定要用Number()或者parseFloat()做类型转换。 - 过滤条件用
||连接：很多时候我们需要的是所有条件都满足才保留数据，应该用&&连接，用||的话会变成满足任意一个条件就保留，不符合多条件过滤的预期。
以上就是React中多条件过滤数组的几种常用实现方式，大家可以根据实际场景选择合适的方法，核心思路是把每个过滤条件拆分成独立的判断逻辑，保证代码的可读性和可维护性。
React多条件过滤数组filter方法useMemo优化动态条件数组前端数据处理 本作品最后修改时间：2026-05-22 14:27:00