当前位置：首页 > React

react如何筛选数据

2026-03-30 20:21:14React

筛选数据的基本方法

在React中筛选数据通常涉及使用数组的filter方法结合状态管理。假设有一个数据数组data和一个筛选条件filterValue，可以通过以下方式实现筛选：

const filteredData = data.filter(item => 
  item.name.toLowerCase().includes(filterValue.toLowerCase())
);

结合状态管理

在函数组件中，使用useState管理数据和筛选条件：

react如何筛选数据

const [data, setData] = useState([]);
const [filterValue, setFilterValue] = useState('');

const filteredData = data.filter(item =>
  item.name.toLowerCase().includes(filterValue.toLowerCase())
);

动态筛选输入

将筛选条件与输入框绑定，实现动态筛选：

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

多条件筛选

对于更复杂的筛选，可以扩展筛选逻辑：

react如何筛选数据

const filteredData = data.filter(item => {
  const matchesName = item.name.toLowerCase().includes(filterValue.toLowerCase());
  const matchesCategory = item.category === selectedCategory;
  return matchesName && matchesCategory;
});

性能优化

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

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

使用Reducer管理复杂状态

当筛选逻辑变得复杂时，可以考虑使用useReducer：

const filterReducer = (state, action) => {
  switch (action.type) {
    case 'SET_FILTER':
      return { ...state, filterValue: action.payload };
    case 'SET_CATEGORY':
      return { ...state, selectedCategory: action.payload };
    default:
      return state;
  }
};

const [filterState, dispatch] = useReducer(filterReducer, {
  filterValue: '',
  selectedCategory: null
});