React+Express+FastAPI考勤系统：邮箱搜索用户无输出求助

问题背景 #

使用React、Node.js/Express、FastAPI开发学生考勤系统，原本调用getAllUsers接口获取全部用户并展示表格的功能正常，但添加邮箱搜索功能后，页面无报错却无法显示搜索结果。

代码问题分析 #

1. 前端搜索功能代码的核心问题 #

新添加搜索功能的React组件存在以下关键问题：

• 缺失状态定义：原组件中的loading和error状态被遗漏，导致setLoading、setError调用时会触发未定义错误（可能被React错误边界捕获或未被注意到控制台日志）。
• 表单默认提交行为未阻止：<form>内的<button>默认是submit类型，点击会触发页面刷新，导致搜索请求的结果被清空。
• 初始加载逻辑丢失：原组件中通过useEffect初始化加载全部用户的代码被删除，页面打开后无初始数据。
• URL拼接的编码问题：直接将邮箱拼接进URL，若邮箱包含特殊字符（如+、%），会导致请求参数解析错误。

2. 后端代码的潜在问题 #

Express的getUser接口直接拼接邮箱到FastAPI的URL中，同样存在参数编码风险，且未处理邮箱为空的非法请求。

修复方案 #

前端代码修复 #

import React, { useState, useEffect } from "react";
import axios from "axios";

export default function Users() {
    // 恢复缺失的状态定义
    const [users, setUsers] = useState([]);
    const [email, setEmail] = useState("");
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    // 恢复初始加载全部用户的逻辑
    useEffect(() => {
        async function fetchUsers() {
            try {
                const response = await axios.get('http://localhost:3001/getAllUsers');
                setUsers(response.data);
                setLoading(false);
            } catch (error) {
                setError("Failed to fetch data");
                setLoading(false);
            }
        }
        fetchUsers();
    }, []);  

    const handleSearchClick = async (e) => {
        // 阻止表单默认提交行为
        e.preventDefault();
        if (!email.trim()) {
            // 空输入时重置为全部用户
            const response = await axios.get('http://localhost:3001/getAllUsers');
            setUsers(response.data);
            return;
        }
        try {
            setLoading(true);
            setError(null);
            // 使用axios params自动处理URL编码
            const response = await axios.get('http://localhost:3001/getUser', {
                params: { email }
            });
            // 确保数据为数组（适配FastAPI返回单个用户的情况）
            setUsers(Array.isArray(response.data) ? response.data : [response.data]);
            setLoading(false);
        } catch (error) {
            setError("Failed to fetch user");
            setLoading(false);
        }
    }

    if (loading) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error}</div>;
    }

    return (
        <div>
            <h1>Users</h1>
            <div className="user-container">
                <form className="search-user">
                    <input
                        type="text"
                        placeholder="email address"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                    {/* 设置按钮类型为button，避免默认提交行为 */}
                    <button className="search-user-btn" onClick={handleSearchClick} type="button">
                        Search
                    </button>
                </form>

                <table className="user-table">
                    <thead>
                    <tr>
                        <th>FIRST NAME</th>
                        <th>LAST NAME</th>
                        <th>PHONE NUMBER</th>
                        <th>EMAIL</th>
                        <th>USER TYPE</th>
                    </tr>
                    </thead>
                    <tbody>
                    {users.map((user) => (
                        <tr key={user.id}>
                            <td>{user.firstName}</td>
                            <td>{user.lastName}</td>
                            <td>{user.phoneNumber}</td>
                            <td>{user.email}</td>
                            <td>{user.userType}</td>
                        </tr>
                    ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}

后端代码优化 #

app.get("/getUser", async (req, res) => {
    try {
        const { email } = req.query;
        if (!email) {
            return res.status(400).json({ error: "Email parameter is required" });
        }
        // 使用axios params自动处理URL编码
        const response = await axios.get(`${FASTAPI_URL}/getUser`, {
            params: { email }
        });
        res.json(response.data);
    } catch (error) {
        console.error("Error fetching user:", error);
        res.status(500).json({ error: "Failed to fetch data" });
    }
});

额外验证步骤 #

1. 打开浏览器开发者工具（F12），查看Network标签页，确认搜索请求是否成功发送、响应数据是否正确返回。
2. 检查FastAPI的getUser接口返回格式，确保返回单个用户对象或用户数组，适配前端map遍历逻辑。
3. 测试含特殊字符的邮箱（如test+123@example.com），验证参数编码问题已解决。

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