当前位置：首页 > React

react如何实现查询

2026-01-24 08:44:28React

React 实现查询功能的方法

在 React 中实现查询功能通常需要结合状态管理和事件处理。以下是几种常见的方法：

使用 useState 和过滤数组

通过 useState 管理查询输入和过滤后的数据列表。用户在输入框中输入查询内容时，触发过滤逻辑。

import React, { 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 React, { useState, useMemo } from 'react';

function SearchComponent({ data }) {
  const [query, setQuery] = useState('');
  const filteredData = useMemo(() => 
    data.filter(item => 
      item.name.toLowerCase().includes(query.toLowerCase())
    ), 
    [data, query]
  );

  return (
    // 同上
  );
}

结合后端 API 查询

如果需要从后端获取查询结果，可以使用 useEffect 和异步请求（如 fetch 或 axios）。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ApiSearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (query.trim() === '') {
      setResults([]);
      return;
    }

    setLoading(true);
    axios.get(`/api/search?q=${query}`)
      .then(response => {
        setResults(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error(error);
        setLoading(false);
      });
  }, [query]);

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

使用第三方库

对于更复杂的查询需求，可以集成第三方库如 lodash 的 debounce 函数，避免频繁触发 API 请求。

import React, { useState, useEffect } from 'react';
import { debounce } from 'lodash';
import axios from 'axios';

function DebouncedSearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const debouncedSearch = debounce(async (query) => {
    if (query.trim() === '') {
      setResults([]);
      return;
    }
    const response = await axios.get(`/api/search?q=${query}`);
    setResults(response.data);
  }, 500);

  useEffect(() => {
    debouncedSearch(query);
    return () => debouncedSearch.cancel();
  }, [query]);

  return (
    // 同上
  );
}