react如何筛选数据
筛选数据的方法
在React中筛选数据通常涉及对数组的操作，结合状态管理和渲染逻辑。以下是几种常见的实现方式：
使用数组的filter方法
通过JavaScript数组的filter方法筛选数据，并将结果渲染到组件中：
const filteredData = originalData.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
);在组件中直接使用filteredData进行渲染：
{filteredData.map(item => (
<div key={item.id}>{item.name}</div>
))}结合useState和useEffect管理筛选状态
当筛选条件需要动态变化时，可以使用React的状态钩子：
const [searchTerm, setSearchTerm] = useState('');
const [filteredData, setFilteredData] = useState(originalData);
useEffect(() => {
const result = originalData.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
);
setFilteredData(result);
}, [searchTerm, originalData]);通过输入框更新筛选条件：
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>使用useMemo优化性能
对于大型数据集或复杂筛选逻辑，可以使用useMemo避免不必要的重新计算：
const filteredData = useMemo(() => {
return originalData.filter(item =>
item.category === selectedCategory
);
}, [originalData, selectedCategory]);多条件筛选
实现多个筛选条件的组合查询：
const filteredData = originalData.filter(item => {
const matchesName = item.name.toLowerCase().includes(nameFilter.toLowerCase());
const matchesCategory = item.category === categoryFilter;
return matchesName && matchesCategory;
});使用第三方库
对于复杂的数据操作，可以考虑使用如lodash等工具库：
import _ from 'lodash';
const filteredData = _.filter(originalData, {
active: true,
department: 'engineering'
});服务端筛选
当数据量非常大时，可以将筛选逻辑移至服务端：
const fetchFilteredData = async (query) => {
const response = await fetch(`/api/data?q=${query}`);
return response.json();
};在React组件中调用：
useEffect(() => {
fetchFilteredData(searchTerm).then(data => setFilteredData(data));
}, [searchTerm]);注意事项
- 对于敏感字符的输入，需要进行转义处理以防止XSS攻击
- 空筛选条件应返回完整数据集而非空结果
- 考虑添加防抖机制（如300ms延迟）处理频繁的输入变化
- 对于非字符串类型的数据（如日期、数字），需要特殊处理比较逻辑
