当前位置：首页 > React

react中如何筛选

2026-02-12 02:33:17React

筛选数组并渲染

在React中筛选数组通常涉及使用filter方法结合状态管理。以下是一个基础示例：

import { useState } from 'react';

function FilterList() {
  const [searchTerm, setSearchTerm] = useState('');
  const items = ['Apple', 'Banana', 'Cherry', 'Date'];

  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

复杂对象筛选

当处理对象数组时，可以扩展筛选逻辑：

react中如何筛选

const products = [
  { id: 1, name: 'Laptop', category: 'Electronics' },
  { id: 2, name: 'Shirt', category: 'Clothing' }
];

function ProductList() {
  const [filters, setFilters] = useState({
    name: '',
    category: ''
  });

  const filteredProducts = products.filter(product => {
    return (
      product.name.toLowerCase().includes(filters.name.toLowerCase()) &&
      (filters.category === '' || product.category === filters.category)
    );
  });

  // 渲染逻辑...
}

性能优化

对于大型数据集，考虑使用useMemo避免不必要的重新计算：

react中如何筛选

import { useState, useMemo } from 'react';

function BigDataList({ data }) {
  const [filterValue, setFilterValue] = useState('');

  const filteredData = useMemo(() => {
    return data.filter(item =>
      item.name.toLowerCase().includes(filterValue.toLowerCase())
    );
  }, [data, filterValue]);

  // 渲染逻辑...
}

多条件筛选

实现组合筛选条件时，可以构建动态筛选函数：

function MultiFilter() {
  const [filters, setFilters] = useState({
    priceRange: [0, 100],
    inStock: false
  });

  const filterProducts = (products) => {
    return products.filter(product => {
      const priceMatch = product.price >= filters.priceRange[0] && 
                        product.price <= filters.priceRange[1];
      const stockMatch = !filters.inStock || product.inStock;
      return priceMatch && stockMatch;
    });
  };

  // 渲染逻辑...
}

使用第三方库

对于复杂筛选需求，可以考虑使用专用库如match-sorter：

import { matchSorter } from 'match-sorter';

function EnhancedSearch({ items }) {
  const [search, setSearch] = useState('');

  const results = matchSorter(items, search, {
    keys: ['name', 'description']
  });

  // 渲染逻辑...
}

标签: react