当前位置：首页 > React

react如何实现查询功能

2026-01-25 13:46:36React

实现查询功能的方法

在React中实现查询功能通常涉及状态管理、用户输入处理和过滤数据。以下是几种常见方法：

使用useState管理查询状态

import { useState } from 'react';

function SearchComponent({ data }) {
  const [query, setQuery] = useState('');

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

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

使用useMemo优化性能

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

import { useState, useMemo } from 'react';

function SearchComponent({ data }) {
  const [query, setQuery] = useState('');

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

  // ...其余代码同上
}

实现延迟搜索

添加防抖功能避免频繁触发搜索：

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

function SearchComponent({ data }) {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

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

  // ...其余代码同上
}

多字段搜索

实现同时对多个字段进行搜索：

const filteredData = data.filter(item => {
  const searchFields = ['name', 'description', 'category'];
  return searchFields.some(field => 
    item[field].toLowerCase().includes(query.toLowerCase())
  );
});

使用第三方库

对于复杂搜索需求，可以考虑使用专门库如Fuse.js：

react如何实现查询功能

import Fuse from 'fuse.js';

function SearchComponent({ data }) {
  const [query, setQuery] = useState('');

  const fuse = new Fuse(data, {
    keys: ['name', 'description'],
    threshold: 0.3
  });

  const results = query ? fuse.search(query) : data;
  const filteredData = results.map(result => result.item || result);

  // ...其余代码同上
}