React调用Github REST API实现输入框自动补全功能失效问题求助

原有代码核心问题 #

• API调用逻辑错误：使用了单用户查询接口，且入参为初始为空的users数组，无法获取有效用户数据
• 数据加载和输入逻辑脱节：仅在组件挂载时调用一次接口，没有和用户输入的搜索词关联，无法生成匹配的补全建议
• 过滤逻辑无有效数据源：从空数组中过滤匹配项，返回结果永远为空

修复后完整代码 #

import React, { useState, useRef } from 'react';
import axios from 'axios';
import './Home.css'

const SearchRepo = () => {
    const [text, setText] = useState('');
    const [suggestions, setSuggestions] = useState([]);
    const timerRef = useRef(null); // 防抖定时器引用

    // 搜索Github用户接口
    const searchGithubUsers = async (searchKey) => {
        if (!searchKey.trim()) {
            setSuggestions([]);
            return;
        }
        try {
            const response = await axios.get('https://api.github.com/search/users', {
                params: {
                    q: searchKey,
                    per_page: 10 // 最多返回10条补全建议，可自定义
                }
            });
            setSuggestions(response.data.items);
        } catch (err) {
            console.error('用户搜索失败', err);
            setSuggestions([]);
        }
    }

    // 防抖处理：输入停止300ms后再发起请求，减少接口调用频次
    const onChangeHandler = (inputVal) => {
        setText(inputVal);
        if (timerRef.current) clearTimeout(timerRef.current);
        timerRef.current = setTimeout(() => {
            searchGithubUsers(inputVal);
        }, 300);
    }

    // 点击建议项填充输入框
    const onSuggestHandler = (userName) => {
        setText(userName);
        setSuggestions([]);
    }

    return (
        <div align="center">
            <table border="0" width="100%" height="212px">
                <tr>
                    <td bgcolor="#C0C0C0" height="55px">&nbsp;&nbsp;&nbsp; <b>
                        <font face="Berlin Sans FB" color="#333333">Github Repo Search</font></b></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <div align="center">
                            <table border="0" width="100%" className="SearchTable">
                                <div align="center">
                                    <input 
                                        type="text" 
                                        placeholder="      Enter github repo ID / username" 
                                        name="T1" 
                                        size="88" 
                                        value={text} 
                                        onBlur={()=>{setTimeout(()=>{setSuggestions([])},100)}} 
                                        onChange={e => onChangeHandler(e.target.value)} 
                                        className="inputArea" 
                                    />
                                    {suggestions && suggestions.map((suggestion,i)=>
                                        <div key={i} className="suggestion" onClick={()=>onSuggestHandler(suggestion.login)}>{suggestion.login}</div>
                                    )}
                                </div>
                            </table>
                        </div>

                        <div align="center">
                            <table border="0" width="100%" className="reposresultsTable">
                                <div align="left">
                                    <tr>
                                        <td bgcolor="#FFFFFF">&nbsp;&nbsp; <b>
                                            <font face="Verdana" size="2" className="labeltxt"><h3>&nbsp;&nbsp;&nbsp;&nbsp;Repos</h3></font></b>
                                        </td>
                                    </tr>
                                </div>
                            </table>
                        </div>

                    </td>
                </tr>
            </table>
        </div>
    );
}

export default SearchRepo;

功能说明 #

用户在输入框输入关键词后，等待300ms无输入会自动请求Github公开的用户搜索接口，返回匹配的用户名作为补全建议，点击任意建议项即可自动填充到输入框中，完成自动补全逻辑。

内容的提问来源于stack exchange，提问作者MikeBlue