javascript - 从反应客户端获取帖子在 NodeJS express 后端中变得未定义

Question

我是 NodeJS 的新手并做出反应。我正在尝试制作一个表单来注册一个新用户，该用户将被保存到一个 json.file（不使用该项目的数据库）。我整天都在尝试找出为什么我的 fetch post 请求在后端为空。我试过用邮递员发帖，它可以工作，我在控制台上检查了网络，它表明提取请求没有错误。我的反应前端

class Register extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      subbed: true,
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange= (e)=> {
    this.setState({[e.target.name]: e.target.value})

  }
  handleSubmit= e => {
    e.preventDefault()
    console.log(this.state)

    const { username, password, subbed } = this.state;
    var data = {username: this.username, password:this.password, subbed:this.subbed}
    fetch('http://localhost:3001/reg', {
      method: 'POST',
      mode:'no-cors',
      body: JSON.stringify(data),
      headers: {
        "Content-type": "application/json"
      }

    })
    console.log(username)
    console.log(password)
    console.log(subbed)

  }

  render() {
    const { email, password, subbed } = this.state;
    return (
      <header className="App-header">
        <form onSubmit={this.handleSubmit} method="POST">
          <label>E-post:</label>
          <br />
          <input
            name="username"
            type="text"
            value={email}
            onChange={this.handleInputChange}
          />
          <br />
          <label>Lösenord</label>
          <br />
          <input
            name="password"
            type="password"
            value={password}
            onChange={this.handleInputChange}
          />
          <br />
          <label>Vill du ta del av vårt nyhetsbrev?</label>
          <input
            name="subbed"
            type="checkbox"
            checked={subbed}
            onChange={this.handleInputChange}
          />
          <br />
          <input type="submit"></input>
        </form>
      </header>
    );
  }
}

render(<Register />, document.getElementById("root"));

和我的 NodeJS 帖子：

const express = require('express')
const bodyparser = require('body-parser')
const app = express()
const port = 3001
const fs =require('fs')
const path= require('path')
app.use(express.json())
app.use(bodyparser.json())
app.use(express.urlencoded({
    extended: true
  }));
app.use(bodyparser.urlencoded());

app.post('/reg', (req,res)=>{



    console.log(req.body.user)
    console.log(req.body.username)
    console.log(req.body.password)
    console.log(req.body.subbed)
    res.send(req.body.username+ ' '+req.body.password +' '+req.body.subbed)
fs.readFile('users.json', (err, data)=>{
    if (err) throw err
    const users = JSON.parse(data);

})
let user ={
    username :req.body.username,
    password : req.body.password,
    subbed:req.body.subbed
};
var arr = [];
arr.push(user);
fs.writeFile('users.json', JSON.stringify(user), err=> {
    if (err) throw err

    res.send('Done!')
})
})

知道我哪里出错了，或者谁能指出我正确的方向？

标签： javascriptnode.jsjsonreactjs