如何将React.js表单数据发送至Express API并存储到MongoDB

你已经具备了React前端注册组件和Express后端注册API，只需要在React组件中添加表单提交事件处理和API调用逻辑，就能完成数据的传输与存储。具体步骤如下：

1. 绑定表单提交事件 #

为<form>标签添加onSubmit属性，绑定自定义处理函数，阻止浏览器默认的表单刷新行为。

2. 前端基础验证（可选但推荐） #

在发送请求前先做本地验证，比如确认两次输入的密码一致，减少无效API请求。

3. 调用Express API发送数据 #

可以使用浏览器原生fetch API（无需额外依赖）或axios（需先执行npm install axios）发送POST请求。

修改后的完整Register组件代码 #

import React, { useState } from 'react'

const Register = () => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        password: '',
        password2: ''
    });
    // 用于存储错误提示信息
    const [error, setError] = useState('');

    const { name, email, password, password2 } = formData;

    const onChange = (e) =>
        setFormData({ ...formData, [e.target.name]: e.target.value });

    const onSubmit = async (e) => {
        e.preventDefault(); // 阻止默认表单提交刷新页面
        
        // 前端密码一致性验证
        if (password !== password2) {
            setError('两次输入的密码不一致');
            return;
        }

        try {
            // 发送POST请求到你的Express API地址
            const response = await fetch('http://localhost:5000/api/users', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ name, email, password }) // 仅传递API所需字段
            });

            const data = await response.json();

            if (!response.ok) {
                // 处理API返回的验证错误
                setError(data.errors[0].msg);
                return;
            }

            // 注册成功：存储token到本地，或跳转到首页/登录页
            localStorage.setItem('token', data.token);
            alert('注册成功！');
            // 若使用react-router-dom，可添加路由跳转：props.history.push('/login')
        } catch (err) {
            setError('服务器连接失败，请稍后重试');
            console.error(err);
        }
    };

    return (
        <section className="container">
            <h1 className="large text-primary">Sign Up</h1>
            <p className="lead">
                <i className="fas fa-user" /> Create Your Account
            </p>
            {/* 显示错误提示 */}
            {error && <div className="alert alert-danger">{error}</div>}
            <form className="form" onSubmit={onSubmit}>
                <div className="form-group">
                    <input
                        type="text"
                        placeholder="Name"
                        name="name"
                        value={name}
                        onChange={onChange}
                        required
                    />
                </div>
                <div className="form-group">
                    <input
                        type="email"
                        placeholder="Email Address"
                        name="email"
                        value={email}
                        onChange={onChange}
                        required
                    />
                    <small className="form-text">
                        
                    </small>
                </div>
                <div className="form-group">
                    <input
                        type="password"
                        placeholder="Password"
                        name="password"
                        value={password}
                        onChange={onChange}
                        required
                        minLength="6"
                    />
                </div>
                <div className="form-group">
                    <input
                        type="password"
                        placeholder="Confirm Password"
                        name="password2"
                        value={password2}
                        onChange={onChange}
                        required
                        minLength="6"
                    />
                </div>
                <input type="submit" className="btn btn-primary" value="Register" />
            </form>
            <p className="my-1">
                
            </p>
        </section>
    )
}

export default Register

关键注意事项 #

• API地址匹配：确保fetch的URL与你的Express服务器地址一致（本地开发通常为http://localhost:5000/api/users），若前后端部署在同一域名下，可使用相对路径/api/users。
• 请求头配置：必须设置Content-Type: application/json，否则Express无法解析请求体中的JSON数据。
• 跨域处理：若前后端端口不同（如React在3000，Express在5000），需在Express端配置CORS：

  // 在Express主文件中添加
  const cors = require('cors');
  app.use(cors());
  

• 错误处理：同时覆盖前端验证错误、API返回错误和网络错误，给用户明确的操作提示。

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