从文本框获取输入填充自动完成不起作用

Question

请问如何让用户从 github REST api 进入自动完成？我正在尝试将来自 github rest api 的信息输入到输入框中，然后创建一个自动完成输入框，但不知何故它不起作用，它不会将信息输入输入框，也不会正确生成自动完成。

分享我的源代码，看起来是这样的

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


const SearchRepo = () => {
    const [users, setUsers] = useState([]);
    const [text, setText] = useState('');
    const [suggestions, setSuggestions] = useState([]);

useEffect(()=>{
    const loadUsers = async()=>{
        const response = await axios.get(`https://api.github.com/users/${users}`);
        setUsers(response.data);
    }
    loadUsers();
},[])

const onSuggestHandler = (text)=>{
    setText(text);
    setSuggestions([]);
}

const onChangeHandler = (text) =>{
    //setSeachUser(e.target.value);
    let matches = []
    if(text.length > 0){
        matches = users.filter(user =>{
            const regex = new RegExp(`${text}`,"gi");
            return user.login.match(regex);
        })
    } 
    setSuggestions(matches);
    setText(text);
}


    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>

                                <div align="left">
                                    <tr>
                                        <td height="23">&nbsp;&nbsp;&nbsp; <b>
                                            <font face="Verdana" size="2">
                                                <a href="https://test-restapi2.herokuapp.com/employees/">
                                                    mmmmmmmm</a></font></b></td>
                                    </tr>
                                </div>

                            </table>
                        </div>

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

export default SearchRepo;

只需要它来获取用户并放入自动完成的输入框

Answer 1

您需要修复您的 HTTP 请求调用，并确保正确检索用户和设置建议。目前，您正在使用您的状态变量 users 调用 GitHub API users 端点，该变量初始化为 '[]'：

useEffect(()=>{
    // the following function can't work as intended
    const loadUsers = async()=>{
        const response = await axios.get(`https://api.github.com/users/${users}`);  // users value is []
        setUsers(response.data);
    }
    loadUsers();
},[])