使用 React 连接到 express 后端时遇到问题

Question

尝试使用 react 设置注册表单，然后将表单发送到我的快递支持以创建用户。请求正在到达后端，但没有任何表单数据。 当我 console.log 请求正文和参数时，只返回一个空对象

这是我的反应注册码

import React from 'react'

class Register extends React.Component {
    state = {
        name: "",
        username: "",
        password: ""
    }

    handleChange = event => {
        const { name, value } = event.target
        this.setState({[name]:value})
    }

    handleSubmit = event => {
        event.preventDefault();

        fetch("/api/register", {
            method: "POST",
            body: JSON.stringify(this.state)
        })
        .then((result)=> result.json())
        .then((info) => { console.log(info); })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" name="name" value={this.state.name} placeholder="name" onChange={this.handleChange} />
                    <input type="text" name="username" value={this.state.username} placeholder="username" onChange={this.handleChange} />
                    <input type="password" name="password" value={this.state.password} placeholder="password" onChange={this.handleChange} />
                    <button>Register</button>
                </form>
            </div>
        )
    }
}

export default Register 

快递代码

const express = require("express"),
      passport = require("passport"),
      User = require("../models/user");

const router = express.Router({mergeParams: true});


// /api before this
router.post("/register", (req, res)=>{
    const newUser = new User({
        username: req.body.username,
        name: req.body.name
    });
    User.register(newUser, req.body.password, (err, user)=>{
        if(err) {
            console.log(err);
        }
        passport.authenticate("local")(req, res, ()=>{
            res.redirect("/user/" + user._id);
        });
    });
});

module.exports = router;

现在我收到一个 400 错误请求错误和另一个错误，上面写着： register:1 Uncaught (in promise) SyntaxError: Unexpected token B in JSON at position 0

Answer 1

我会说 fetch 操作中的 url 与您的快速路由不匹配

/api/register > /register

尝试将/api 添加到快速路由或从获取操作中删除 我还注意到你的路线没有返回任何东西。 你必须在响应对象中返回一些东西。

res.json(newUser);

router.post("/register", (req, res)=>{
    const newUser = new User({
        username: req.body.username,
        name: req.body.name
    });

    // some code

  return res.json(newUser);
});