当前位置：首页 > React

react-如何实现接口搜索功能

2026-01-25 16:12:53React

实现接口搜索功能的步骤

在React中实现接口搜索功能通常涉及以下几个关键部分：状态管理、API调用、用户输入处理和结果展示。

状态管理

使用useState来管理搜索输入和搜索结果的状态。需要定义两个状态变量，一个用于存储用户输入的搜索关键词，另一个用于存储从接口获取的搜索结果。

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

处理用户输入

创建一个输入框用于接收用户的搜索输入，并通过onChange事件更新searchTerm状态。

<input
  type="text"
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
  placeholder="输入搜索关键词"
/>

触发搜索请求

通常有两种方式触发搜索请求：一种是用户输入时实时触发（防抖优化），另一种是用户点击搜索按钮后触发。这里以点击按钮为例。

const handleSearch = async () => {
  try {
    const response = await fetch(`https://api.example.com/search?q=${searchTerm}`);
    const data = await response.json();
    setSearchResults(data);
  } catch (error) {
    console.error('搜索失败:', error);
  }
};

<button onClick={handleSearch}>搜索</button>

防抖优化（可选）

如果希望实现实时搜索（输入时自动触发搜索），可以使用防抖函数避免频繁调用接口。

import { useEffect, useState } from 'react';

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

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

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

  return debouncedValue;
};

const debouncedSearchTerm = useDebounce(searchTerm, 500);

useEffect(() => {
  if (debouncedSearchTerm) {
    handleSearch();
  }
}, [debouncedSearchTerm]);

展示搜索结果

将获取到的搜索结果渲染到页面上，通常使用列表形式展示。

<ul>
  {searchResults.map((result) => (
    <li key={result.id}>{result.name}</li>
  ))}
</ul>

错误处理和加载状态

为了提高用户体验，可以添加加载状态和错误提示。

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

const handleSearch = async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(`https://api.example.com/search?q=${searchTerm}`);
    const data = await response.json();
    setSearchResults(data);
  } catch (error) {
    setError('搜索失败，请重试');
  } finally {
    setIsLoading(false);
  }
};

{isLoading && <p>加载中...</p>}
{error && <p style={{ color: 'red' }}>{error}</p>}

完整示例代码

以下是一个完整的React组件示例，实现了接口搜索功能：

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

const SearchComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSearch = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch(`https://api.example.com/search?q=${searchTerm}`);
      const data = await response.json();
      setSearchResults(data);
    } catch (error) {
      setError('搜索失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="输入搜索关键词"
      />
      <button onClick={handleSearch}>搜索</button>
      {isLoading && <p>加载中...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;

通过以上步骤，可以在React中实现一个完整的接口搜索功能，包括用户输入处理、API调用、结果展示以及错误处理和加载状态。

react-如何实现接口搜索功能