如何在React中根据用户输入动态按ID获取大学数据？

核心问题 #

当前代码存在几个关键问题：

• 输入框提示用户输入大学名称，但代码直接将输入值作为id参数传给API，而College Scorecard API的id是学校的唯一标识数字，不是名称，导致请求无法匹配到正确数据。
• axios的GET请求语法错误：GET请求不需要传递请求体（JSON.stringify(userData)是多余的），第二个参数应该是请求配置对象。
• 未实现获取到数据后的展示逻辑，仅在控制台输出状态。

修正步骤 #

1. 调整状态命名与输入逻辑：将institutionId改为institutionName，明确输入的是学校名称而非ID。
2. 修改API请求参数：使用school.name参数替代id，实现通过名称查询学校信息，同时保留fields参数指定返回的字段。
3. 修正axios GET请求格式：移除多余的请求体参数，规范请求配置。
4. 添加数据状态与展示逻辑：新增状态存储获取到的学校数据，在页面上渲染结果。

修正后的完整代码 #

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

function App() {
    const [institutionName, setInstitutionName] = useState("");
    const [schoolData, setSchoolData] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const submitHandler = (e) => {
        e.preventDefault();
        if (!institutionName.trim()) return;
        
        setLoading(true);
        setError("");
        setSchoolData(null);
        
        const APIKey = "你的API密钥";
        axios
            .get(`https://api.data.gov/ed/collegescorecard/v1/schools.json`, {
                params: {
                    "school.name": institutionName,
                    fields: "school.name,2020.student.size",
                    api_key: APIKey
                },
                headers: {
                    "Content-Type": "application/json",
                },
            })
            .then((response) => {
                if (response.data.results.length > 0) {
                    setSchoolData(response.data.results[0]);
                } else {
                    setError("未找到匹配的大学信息");
                }
            })
            .catch((err) => {
                setError(`请求失败：${err.message}`);
                console.error(err);
            })
            .finally(() => {
                setLoading(false);
            });
    };

    return (
        <Container className="mt-4">
            <div className="App">
                <h1>大学查询工具</h1>
            </div>
            <Form onSubmit={submitHandler} className="mb-4">
                <Form.Group className="mb-3" controlId="formSchoolName">
                    <Form.Label>输入大学名称</Form.Label>
                    <Form.Control 
                        type="text" 
                        value={institutionName}
                        onChange={(e) => setInstitutionName(e.target.value)} 
                        placeholder="例如：哈佛大学"
                    />
                </Form.Group>
                <Button variant="primary" type="submit" disabled={loading}>
                    {loading ? "查询中..." : "提交查询"}
                </Button>
            </Form>

            {/* 展示查询结果 */}
            {error && <div className="alert alert-danger">{error}</div>}
            {schoolData && (
                <Card>
                    <Card.Body>
                        <Card.Title>{schoolData["school.name"]}</Card.Title>
                        <Card.Text>
                            2020年在校学生规模：{schoolData["2020.student.size"]}人
                        </Card.Text>
                    </Card.Body>
                </Card>
            )}
        </Container>
    );
}

export default App;

额外说明 #

• 如果需要通过学校ID查询，可保留id参数，但需将输入框改为提示用户输入ID，并调整状态命名为institutionId。
• 建议添加输入验证逻辑，比如禁止空提交，提升用户体验。
• College Scorecard API支持模糊匹配，若需精确匹配可添加school.name__exact参数替代school.name。

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