react-如何实现接口搜索功能
实现接口搜索功能的步骤
在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调用、结果展示以及错误处理和加载状态。
