当前位置：首页 > React

react 搜索数据的实现

2026-01-27 11:09:21React

搜索数据的实现方法

在React中实现搜索功能通常涉及以下几个关键步骤：

使用状态管理存储搜索词

const [searchTerm, setSearchTerm] = useState('');

创建输入框处理用户输入

<input
  type="text"
  placeholder="Search..."
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
/>

过滤数据实现搜索功能

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

渲染过滤后的结果

{filteredData.map(item => (
  <div key={item.id}>{item.name}</div>
))}

性能优化方案

防抖处理减少频繁过滤

import { debounce } from 'lodash';

const handleSearch = debounce((term) => {
  setSearchTerm(term);
}, 300);

<input onChange={(e) => handleSearch(e.target.value)} />

使用useMemo缓存过滤结果

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

高级搜索实现

多字段搜索支持

const filteredData = data.filter(item =>
  Object.keys(item).some(key =>
    String(item[key]).toLowerCase().includes(searchTerm.toLowerCase())
  )
);

添加搜索类型选择

const [searchType, setSearchType] = useState('name');

<select value={searchType} onChange={(e) => setSearchType(e.target.value)}>
  <option value="name">Name</option>
  <option value="email">Email</option>
</select>

const filteredData = data.filter(item =>
  item[searchType].toLowerCase().includes(searchTerm.toLowerCase())
);

服务器端搜索实现

API请求封装

const [results, setResults] = useState([]);

const fetchSearchResults = async (query) => {
  const response = await axios.get(`/api/search?q=${query}`);
  setResults(response.data);
};

useEffect(() => {
  if (searchTerm) {
    fetchSearchResults(searchTerm);
  }
}, [searchTerm]);

显示加载状态

const [isLoading, setIsLoading] = useState(false);

const fetchSearchResults = async (query) => {
  setIsLoading(true);
  try {
    const response = await axios.get(`/api/search?q=${query}`);
    setResults(response.data);
  } finally {
    setIsLoading(false);
  }
};

{isLoading ? <div>Loading...</div> : (
  results.map(result => <div key={result.id}>{result.name}</div>)
)}

react 搜索数据的实现