在React项目里，我们常常有一个原始数据数组，需要根据用户选择的多个条件动态过滤出符合条件的条目。实现的核心思路是：把筛选条件放到状态中，在渲染时通过数组的filter方法按条件逐一判断。
定义筛选条件状态
通常我们会用useState来保存用户输入的筛选条件，例如关键词、分类和是否启用。这些条件可以是字符串、数字或布尔值。
使用filter进行多条件判断
JavaScript数组自带的filter方法非常适合做这件事。在回调函数中，我们让每个条目依次通过所有条件的检查，只有全部满足才保留。
基础代码示例
下面用一个简单组件展示如何过滤用户列表：
import React, { useState, useMemo } from 'react';
// 原始数据
const users = [
{ id: 1, name: '张三', role: 'admin', active: true },
{ id: 2, name: '李四', role: 'user', active: false },
{ id: 3, name: '王五', role: 'user', active: true },
{ id: 4, name: '赵六', role: 'admin', active: false }
];
function UserFilter() {
// 筛选条件状态
const [keyword, setKeyword] = useState('');
const [role, setRole] = useState('all');
const [onlyActive, setOnlyActive] = useState(false);
// 多条件过滤
const filtered = useMemo(() => {
return users.filter(item => {
// 条件1：关键词匹配名称
const matchKeyword = item.name.includes(keyword);
// 条件2：角色筛选
const matchRole = role === 'all' || item.role === role;
// 条件3：仅看启用
const matchActive = !onlyActive || item.active;
return matchKeyword && matchRole && matchActive;
});
}, [keyword, role, onlyActive]);
return (
<div>
<input
placeholder="输入名称关键词"
value={keyword}
onChange={e => setKeyword(e.target.value)}
/>
<select value={role} onChange={e => setRole(e.target.value)}>
<option value="all">全部角色</option>
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select>
<label>
<input
type="checkbox"
checked={onlyActive}
onChange={e => setOnlyActive(e.target.checked)}
/>
仅显示启用
</label>
<ul>
{filtered.map(u => (
<li key={u.id}>{u.name} - {u.role} - {u.active ? '启用' : '禁用'}</li>
))}
</ul>
</div>
);
}
export default UserFilter;
把条件抽象为配置
当条件变多时，可以把判断逻辑写成一个函数数组，便于扩展和维护。
可扩展的过滤函数
// 每个条件是一个谓词函数
const conditions = [
(item, ctx) => item.name.includes(ctx.keyword),
(item, ctx) => ctx.role === 'all' || item.role === ctx.role,
(item, ctx) => !ctx.onlyActive || item.active
];
function filterByConditions(list, ctx) {
return list.filter(item => conditions.every(fn => fn(item, ctx)));
}
注意事项
- 过滤逻辑尽量纯函数化，不修改原数组。
- 数据量大时，可配合分页或虚拟列表，避免一次渲染过多DOM。
- 表单控件的值要与状态保持同步，防止受控组件警告。
通过上述方式，你可以在React中轻松实现多条件筛选特定条目的功能，且代码结构清晰、易于调试。