使用 React 连接以表达后端时出现问题



>尝试使用 react 设置注册表单,然后将表单发送到我的快递备份以创建用户。请求正在到达后端,但没有任何表单数据。 当我控制台时.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 错误请求错误和另一个错误,上面写着:注册:1 未捕获(在承诺中(语法错误:JSON 中位置为 0 的意外令牌 B

我会说来自获取操作的 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);
});

最新更新