React提交事件后组件消失问题求助（附前后端代码）

前端React代码 #

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        const response = await fetch('/events', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });

        if (!response.ok) {
            throw new Error('Ошибка при отправке данных');
        }

        const data = await response.json();

        const newEvent = {
            id: data.id,
            event: data.event,
            description: data.description,
        };

        setEvents((prevEvents) => [...prevEvents, newEvent]);
    } catch (error) {
        console.error('Ошибка при отправке запроса:', error);
    }
};

后端ExpressJS代码 #

app.post('/events', (req, res) => {
    const { event, description } = req.body;
    const newEvent = {
        id: Math.random(),
        event,
        description,
    };

    DB.events.push(newEvent);

    res.send(newEvent);
});

现象 #

提交新事件后，React组件消失，页面直接显示后端返回的JSON格式文本；预期是页面保留原有组件，并展示更新后的任务列表。

问题原因 #

1. 表单默认提交行为未被彻底阻止：若表单HTML中设置了action或method属性，即使代码里写了e.preventDefault()，仍可能触发浏览器默认的表单提交跳转，直接加载后端返回的JSON内容。
2. 变量命名冲突：前端handleSubmit函数内，用const data = await response.json();覆盖了外部的表单状态变量data，虽不是组件消失的直接原因，但会引发潜在逻辑问题。

解决方案 #

1. 彻底阻止表单默认行为 #

检查表单HTML结构，移除action和method属性，确保onSubmit事件绑定正确：

<form onSubmit={handleSubmit}>
  {/* 表单输入项 */}
  <button type="submit">添加事件</button>
</form>

若e.preventDefault()仍未生效，需排查事件绑定逻辑，确保函数正确挂载到表单的onSubmit事件上。

2. 修复变量命名冲突 #

将响应数据的变量名修改，避免覆盖外部状态变量：

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        const response = await fetch('/events', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });

        if (!response.ok) {
            throw new Error('Ошибка при отправке данных');
        }

        // 修改变量名，避免覆盖外部data状态
        const responseData = await response.json();

        const newEvent = {
            id: responseData.id,
            event: responseData.event,
            description: responseData.description,
        };

        setEvents((prevEvents) => [...prevEvents, newEvent]);
    } catch (error) {
        console.error('Ошибка при отправке запроса:', error);
    }
};

3. 后端响应格式优化（可选） #

使用res.json()替代res.send()，自动设置响应头为application/json，避免浏览器解析异常：

app.post('/events', (req, res) => {
    const { event, description } = req.body;
    const newEvent = {
        id: Math.random(),
        event,
        description,
    };

    DB.events.push(newEvent);

    // 自动设置Content-Type为application/json
    res.json(newEvent);
});

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