当前位置：首页 > React

react中如何筛选

2026-01-23 22:31:43React

筛选数据的基本方法

在React中筛选数据通常涉及对数组的操作，结合状态管理实现动态过滤。以下是常见的筛选实现方式：

使用filter方法 通过JavaScript的Array.prototype.filter()方法对数据进行条件筛选：

const filteredData = originalData.filter(item => item.property === filterValue);

结合useState管理筛选状态 维护一个状态变量存储筛选条件：

const [filter, setFilter] = useState('');
const filteredItems = items.filter(item => 
  item.name.toLowerCase().includes(filter.toLowerCase())
);

输入控制与实时筛选

受控输入组件 创建输入框与筛选逻辑的绑定：

<input 
  type="text" 
  value={filter} 
  onChange={(e) => setFilter(e.target.value)} 
/>

防抖优化 使用lodash的debounce避免频繁触发筛选：

import { debounce } from 'lodash';
const handleSearch = debounce((term) => {
  setFilter(term);
}, 300);

多条件筛选实现

复合筛选逻辑 组合多个条件进行复杂筛选：

const filtered = data.filter(item => {
  return (
    (category ? item.category === category : true) &&
    (priceRange ? item.price >= priceRange.min && item.price <= priceRange.max : true)
  );
});

使用useMemo优化性能 对筛选结果进行缓存：

const filteredData = useMemo(() => {
  return bigData.filter(/* conditions */);
}, [bigData, filterConditions]);

筛选UI模式

下拉选择器筛选 实现基于select的筛选控制：

<select onChange={(e) => setFilterType(e.target.value)}>
  {options.map(opt => (
    <option key={opt.value} value={opt.value}>{opt.label}</option>
  ))}
</select>

复选框组筛选 处理多选筛选场景：

const [selectedFilters, setSelectedFilters] = useState([]);
const toggleFilter = (filter) => {
  setSelectedFilters(prev => 
    prev.includes(filter) 
      ? prev.filter(f => f !== filter)
      : [...prev, filter]
  );
};

服务端筛选

API参数传递 将筛选条件作为请求参数：

useEffect(() => {
  fetch(`/api/items?category=${category}&search=${query}`)
    .then(res => res.json())
    .then(setData);
}, [category, query]);

GraphQL变量 在GraphQL查询中使用筛选变量：

const { data } = useQuery(GET_ITEMS, {
  variables: { filter: { status: 'ACTIVE' } }
});

筛选组件设计模式

受控组件模式 通过props接收筛选值和回调：

function SearchFilter({ value, onChange }) {
  return <input value={value} onChange={onChange} />;
}

上下文共享筛选状态 使用Context跨组件共享筛选条件：

const FilterContext = createContext();
function App() {
  const [filters, setFilters] = useState({});
  return (
    <FilterContext.Provider value={{ filters, setFilters }}>
      {/* 子组件 */}
    </FilterContext.Provider>
  );
}

react中如何筛选