当前位置：首页 > React

react中如何筛选

2026-02-26 12:25:32React

筛选数组数据

在 React 中筛选数组数据通常涉及使用 JavaScript 的 filter() 方法。该方法返回一个新数组，包含符合条件的元素。

const data = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 20 }
];

const filteredData = data.filter(item => item.age > 25);
console.log(filteredData); // [{ id: 2, name: "Bob", age: 30 }]

结合状态管理

在 React 组件中，筛选后的数据通常存储在状态中，以便动态更新 UI。

import { useState } from "react";

function FilterList() {
  const [searchTerm, setSearchTerm] = useState("");
  const [items, setItems] = useState([
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Orange" }
  ]);

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

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

筛选对象属性

如果需要基于对象属性进行筛选，可以结合 Object.keys() 或 Object.entries() 进行动态筛选。

const user = {
  name: "John",
  age: 28,
  role: "developer"
};

const filteredKeys = Object.keys(user).filter(key => key !== "age");
const filteredUser = filteredKeys.reduce((acc, key) => {
  acc[key] = user[key];
  return acc;
}, {});

console.log(filteredUser); // { name: "John", role: "developer" }

结合第三方库

如果筛选逻辑复杂，可以使用 Lodash 的 _.filter() 或 Ramda 等工具库优化代码。

import _ from "lodash";

const data = [
  { id: 1, name: "Alice", role: "admin" },
  { id: 2, name: "Bob", role: "user" }
];

const admins = _.filter(data, { role: "admin" });
console.log(admins); // [{ id: 1, name: "Alice", role: "admin" }]

性能优化

对于大数据量筛选，可使用 useMemo 避免不必要的重新计算。

react中如何筛选

import { useState, useMemo } from "react";

function LargeListFilter() {
  const [query, setQuery] = useState("");
  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(query));
  }, [query, items]);

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

标签: react