node.js - 如何从 React 发送数据到 Express

Question

我正在尝试使用 React/Node/Express/Postgres 为应用程序创建登录/注册。我遇到困难的地方是在服务器端从 React 中的表单接收数据。

我在 register.js 中有一个表单的注册组件

import React from 'react';
import useForm from '../form/useForm';

const Register = () => {

    const { values, handleChange, handleSubmit } = useForm({
            name: '',
            email: '',
            password: "",
            password2: ""
        }, register);

    function register() {
        console.log(values);
    }

  return (
            <div className="row mt-5">
              <div className="col-md-6 m-auto">
                <div className="card card-body">
                  <h1 className="text-center mb-3">
                    <i className="fas fa-user-plus"></i> Register
                  </h1>
                  <form 
                    action="/users/register" 
                    method="POST"
                    onSubmit={handleSubmit}>
                    <div className="form-group">
                      <label htmlFor="name">Name</label>
                      <input 
                      className="form-control" 
                      type="name" 
                      name="name" 
                      onChange={handleChange} 
                      placeholder="Enter Name"
                      value={values.name} 
                      required />
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Email</label>
                      <input 
                      className="form-control" 
                      type="email" 
                      name="email" 
                      onChange={handleChange} 
                      placeholder="Enter Email"
                      value={values.email} 
                      required />
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Password</label>
                      <input 
                      className="form-control" 
                      type="password" 
                      name="password" 
                      onChange={handleChange} 
                      placeholder="Create Password"
                      value={values.password} 
                      required />
                    </div>
                    <div className="form-group">
                      <label htmlFor="email">Confirm Password</label>
                      <input 
                      className="form-control" 
                      type="password" 
                      name="password2" 
                      onChange={handleChange} 
                      placeholder="Confirm Password"
                      value={values.password2} 
                      required />
                    </div>
                    <button type="submit" className="btn btn-primary btn-block">
                      Register
                    </button>
                  </form>
                  <p className="lead mt-4">Have An Account? <a href="/login">Login</a></p>
                </div>
              </div>
            </div>
  );
};

export default Register;

在 useForm.js 中处理表单操作的钩子(Hook)

import {useState, useEffect} from 'react';

const useForm = (initialValues, callback) => {

const [hasError, setErrors] = useState(false);
const [values, setValues] = useState(initialValues);

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(setValues(values => ({ ...values, [event.target.name]: event.target.value })))
    }
    fetch("/users/register", options)
  }

  const handleChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
  }
};

export default useForm;

然后我有一个文件来管理 users.js 中登录/注册的路由

const express = require("express");
const Router = require("express-promise-router");
const db = require("../db");
const router = new Router();

//Login page
router.get('/login', (req, res) => res.send("Login"));

//Register page
router.get('/register', (req, res) => res.send("Register"));

//Register Handle
router.post('/register', (req, res) => {
    console.log(req.body);
    res.send('hecks');
});

module.exports = router;

我尝试在我的 useForm.js Hook 中搞乱 handleSubmit 函数内部的内容，但一切都会导致 console.log(req.body ) 从我的 users.js 文件返回为 undefined。我哪里出错了？

编辑 #1: postman 发送帖子请求的片段

编辑#2:基本项目结构

.
./client
./client/src
./client/src/components
./client/src/components/register
./client/src/components/register/register.js
./client/src/components/form
./client/src/components/form/useForm.js
./client/src/App.js
./routes
./routes/index.js
./routes/users.js
./server.js

编辑#3:主server.js文件

const express = require("express");
const mountRoutes = require("./routes");
const app = express();
mountRoutes(app);
var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

//catch all other routes
app.get("*", function(req, res) {
    res.send("<h1>Page does not exist, sorry</h1>");
});

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));

Answer 1

您正在 JSON.stringify 中设置状态，该状态返回未定义。你必须在其中传递值:

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(values)
    }
    fetch("/users/register", options)
  }