react如何实现查询

实现查询功能的方法

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

使用useState管理查询状态

通过React的useState钩子来管理查询输入和结果：

import React, { useState } from 'react';

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

  const handleSearch = () => {
    // 这里替换为实际的API调用
    fetch(`/api/search?q=${query}`)
      .then(res => res.json())
      .then(data => setResults(data));
  };

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

使用debounce优化性能

对于实时搜索，可以使用debounce技术减少频繁请求：

import { useDebounce } from 'use-debounce';

function DebouncedSearch() {
  const [query, setQuery] = useState('');
  const [debouncedQuery] = useDebounce(query, 500);
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (debouncedQuery) {
      fetch(`/api/search?q=${debouncedQuery}`)
        .then(res => res.json())
        .then(data => setResults(data));
    }
  }, [debouncedQuery]);

  return (
    // 同上
  );
}

结合Redux管理状态

对于复杂应用，可以使用Redux管理搜索状态：

import { useSelector, useDispatch } from 'react-redux';
import { searchAction } from './searchActions';

function ReduxSearch() {
  const dispatch = useDispatch();
  const results = useSelector(state => state.search.results);
  const [query, setQuery] = useState('');

  const handleSearch = () => {
    dispatch(searchAction(query));
  };

  return (
    // 同上
  );
}

使用GraphQL查询

如果后端使用GraphQL，可以通过Apollo Client实现：

import { useQuery, gql } from '@apollo/client';

const SEARCH_QUERY = gql`
  query Search($query: String!) {
    search(query: $query) {
      id
      name
    }
  }
`;

function GraphQLSearch() {
  const [query, setQuery] = useState('');
  const { loading, error, data } = useQuery(SEARCH_QUERY, {
    variables: { query },
    skip: !query
  });

  return (
    <div>
      <input 
        type="text" 
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      <ul>
        {data?.search.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

本地数据过滤

对于少量数据，可以直接在前端过滤：

function LocalSearch({ 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)}
      />
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

每种方法适用于不同场景，可以根据项目需求选择合适的方式实现查询功能。