react实现查询

React 实现查询功能

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

使用 useState 和过滤数组

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

import React, { useState } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [items, setItems] = useState(['Apple', 'Banana', 'Cherry', 'Date']);

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

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

使用 useMemo 优化性能

对于大型数据集，可以使用 useMemo 避免每次渲染都重新计算过滤结果。

import React, { useState, useMemo } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [items, setItems] = useState(['Apple', 'Banana', 'Cherry', 'Date']);

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

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

结合 API 查询

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

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

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

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

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

    fetchData();
  }, [query]);

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

使用防抖优化 API 查询

频繁触发 API 查询可能导致性能问题，可以使用防抖（debounce）技术优化。

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

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

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

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

      fetchData();
    }, 500);

    return () => clearTimeout(timerId);
  }, [query]);

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

使用第三方库

如果需要更复杂的查询功能，可以结合第三方库如 react-select 或 downshift 实现自动完成和搜索建议。

import React, { useState } from 'react';
import Select from 'react-select';

function SearchComponent() {
  const [selectedOption, setSelectedOption] = useState(null);
  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
    { value: 'date', label: 'Date' }
  ];

  return (
    <div>
      <Select
        value={selectedOption}
        onChange={setSelectedOption}
        options={options}
        placeholder="Search..."
        isSearchable
      />
    </div>
  );
}

总结

React 中实现查询功能的方法多种多样，可以根据需求选择合适的方式。简单的本地查询可以使用 useState 和数组过滤，复杂的远程查询可以结合 API 调用和防抖优化。第三方库如 react-select 可以提供更丰富的用户体验。