React使用Axios向Express提交表单失败问题求助

核心问题：事件方法拼写错误 #

报错信息Uncaught TypeError: e.preventDafault is not a function（中文翻译：未捕获类型错误：e.preventDafault 不是一个函数）是所有异常的根源：

• 你在handleLogin函数里把preventDefault拼写成了preventDafault，导致无法阻止浏览器默认的表单提交行为
• 浏览器默认会以GET方式提交表单，因此页面会刷新，表单数据会被附加到URL上，而非通过Axios发送到后端

修复拼写错误 #

将handleLogin中的错误代码：

e.preventDafault();

改为：

e.preventDefault();

优化建议（可选但推荐） #

1. 利用Proxy配置简化请求地址 #

已经在client/package.json中配置了proxy: "http://localhost:8000/"，因此Axios请求可以省略域名，直接写相对路径，提升代码可移植性：

axios.post('/api/login-post', data) // 替代原有的完整URL

2. 修复React组件中的不合理写法 #

• 移除组件内的<body>标签：React组件是页面的一部分，不应嵌套根级<body>元素
• 替换class为className：React中使用className代替HTML的class属性，避免与JS关键字冲突
• 密码输入框改为type="password"：符合登录场景的交互逻辑，隐藏输入内容

修改后的完整Login.js代码 #

import '../App.css';
import React, { useState } from 'react';
import axios from 'axios';

function Login() {
    const [data, setData] = useState({
        email: "",
        password: ""
    });

    function handleLogin(e) {
        e.preventDefault(); // 修复拼写错误
        console.log(data.email, data.password);
        axios
            .post('/api/login-post', data) // 利用proxy简化请求地址
            .then(() => console.log('登录请求已发送'))
            .catch(err => {
                console.error(err);
            });
    }

    function handleInput(e) {
        const newData = { ...data };
        newData[e.target.id] = e.target.value;
        setData(newData);
    }

    return (
        <div id="login" className="login">
            <h1 id="title">Login</h1>
            <div className="form"> {/* 替换class为className */}
                <form onSubmit={handleLogin}> {/* 简化事件绑定写法 */}
                    <input
                        type="text"
                        onChange={handleInput}
                        className="email"
                        name="email"
                        value={data.email}
                        id="email"
                        placeholder="Email"
                    />
                    <input
                        type="password" {/* 修改为password类型 */}
                        onChange={handleInput}
                        className="password"
                        name="password"
                        value={data.password}
                        id="password"
                        placeholder="Password"
                    />
                    <input id="Login" className="Login" type="submit" value="Login" />
                </form>
            </div>
        </div>
    );
}

export default Login;

验证修复效果 #

修改后重新启动前端和后端服务：

1. 点击登录按钮，页面不再刷新
2. 浏览器控制台会打印输入的邮箱和密码
3. 后端server.js的控制台会打印接收到的req.body数据
4. 前端控制台会输出登录请求已发送的成功提示

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