如何從 React 中的用戶輸入通過 ID 動態獲取大學數據？

Question

我有一個 API，我希望只要用戶正確輸入大學名稱，API 就會通過 ID 動態獲取大學信息。 我正在使用 get axios 來獲取數據，這是 UI 圖像：

這是我到目前為止編寫的代碼：

import React, { useState } from "react";
import { Container, Form, Button} from "react-bootstrap";
// Form, Button, Col, Row, Spinner
import axios from "axios"
import './styles.css';

function App() {

    const [institutionId, setInstitutionId] = useState("")

    const submitHandler = (e) => {
        e.preventDefault();
        let userData = {
            institutionId: institutionId
        };
        const APIKey = "API key is hidden";
        axios
            .get(`https://api.data.gov/ed/collegescorecard/v1/schools.json?id=${institutionId}&fields=school.name,2020.student.size&api_key=${APIKey}`, JSON.stringify(userData), {
                headers: {
                    "Content-Type": "application/json",
                },
            })
            .then((response) => {
                if (response.status === 200) {
                    console.log("successfully posted to the server!!");
                } else {
                    console.log("it wasn't successful");
                }
            })
            .catch((err) => {
                console.error(`Error: ${err}`);
            });
        console.log(JSON.stringify(userData));
        // setInstitutionId("");
    };

    return (
        <Container>
        <div className="App">
            <h1>University Finder App</h1>
        </div>
            <Form onSubmit={submitHandler}>
                <Form.Group className="mb-3" controlId="formBasicEmail">
                    <Form.Label>Type University Name</Form.Label>
                    <Form.Control type="text" value={institutionId}
                                  onChange={(e) => setInstitutionId(e.target.value)} />
                </Form.Group>
                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        </Container>
    );
}

export default App;

預先感謝您的幫助，如果我需要進一步澄清我的問題，請告訴我。

Answer 1

我不完全確定我是否聽懂了你的問題並且可以做一些澄清。 您當前的代碼似乎會在單擊提交按鈕時從 API 獲取數據，因為該查詢是在submitHandler函數中執行的。 您是否嘗試在用戶在表單中輸入有效的大學 ID 后立即執行查詢（即不單擊提交按鈕）？ 或者是將大學 ID 傳遞到請求本身的問題？ 一旦你回答了這些，我也許能幫上忙。

編輯：感謝您的澄清！ 我建議首先獲取映射到大學名稱的 ID 列表並將其存儲在某個狀態（如果您只需要在此組件中訪問此列表，則使用useState的本地狀態很好）。 這可能是這樣的列表：

[{ id: 1, label: 'Harvard University'}, { id: 2, label: 'Princeton' }]

這可用於填充下拉列表，當用戶從下拉列表中選擇一個選項時，將通過下拉列表的onSelect處理程序使用選項的 id 屬性調用原始 API。 希望這可以幫助。

Answer 2

由於用戶不知道他想搜索的大學的 Id，我建議從該 API 獲取所有大學並將其存儲在列表中，然后使用具有autocomplete的select組件填充大學列表，然后用戶將開始輸入大學名稱，然后他將獲得可供選擇的建議。