React应用onChange未触发，表单提交数据为空问题求助

核心问题分析 #

你遇到的表单字段提交为空的问题，主要由React状态更新逻辑错误、请求头缺失、数据获取方式不当这几个原因导致，以下是具体修复方案：

1. 修复React状态更新逻辑（关键问题） #

原来的handleChange函数每次更新状态时，会直接替换整个newTeam对象，导致未修改的字段被清空。比如修改nombre后，logo和liga会丢失原有值，最终提交时为空。

修复代码：

const handleChange = (e) => {
    // 展开原有状态，仅更新当前修改的字段
    setNewTeam(prevState => ({ ...prevState, [e.target.name]: e.target.value }))
}

2. 修正数据获取方式 #

直接使用use(fetchAll())会导致组件每次渲染都重复发起请求，可能引发不必要的重渲染甚至状态干扰。改用useEffect配合useState来异步获取数据：

修复代码：

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

const MyForm = () => {
    const [newTeam, setNewTeam] = useState({ nombre: "", logo: "", liga: "" });
    const [data, setData] = useState([]);

    // 组件挂载时仅执行一次数据获取
    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch("http://localhost:3000/api/getEquipos");
            const result = await response.json();
            setData(result);
        };
        fetchData();
    }, []);

    // ...其他函数保持不变
};

3. 补充POST请求头 #

发送JSON格式数据时，必须设置Content-Type请求头，否则后端无法正确解析请求体：

修复代码：

const handleSubmit = async (e) => {
    e.preventDefault();
    // 处理空数据边界，避免findLast报错
    const lastId = data.length > 0 ? data.findLast(elem => elem.id > 1) : { id: 0 };

    try {
        await fetch("http://localhost:3000/api/addEquipos", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json' // 新增请求头
            },
            body: JSON.stringify({
                nombre: newTeam.nombre,
                logo: newTeam.logo,
                liga: newTeam.liga,
                id: lastId.id + 1,
            }),
        });
        // 提交成功后重置表单
        setNewTeam({ nombre: "", logo: "", liga: "" });
    } catch (error) {
        console.log(error);
    }
};

4. 后端代码优化 #

• Next.js API路由会自动解析JSON请求体，无需手动JSON.parse(req.body)
• 空字段校验时需返回明确的错误响应，避免客户端请求挂起

修复代码：

import dbConnect from "lib/dbConnect";
import { equipoModel } from "lib/models/equiposModel";
import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    await dbConnect();
    try {
        const body = req.body;
        console.log(body);

        if (!body.nombre || body.nombre.trim() === "") {
            return res.status(400).json({ error: "Nombre es requerido" });
        }

        await equipoModel.create({
            nombre: body.nombre,
            logo: body.logo,
            liga: body.liga,
            id: body.id
        });
        res.json({ added: true });
    } catch (error) {
        res.status(400).json({ error: error.message });
    }
}

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