从React表单获取数据到express.js

Question

我正在尝试使用POST将一些数据从React表单发送到Express.js，我的React代码中有一些axios代码，但不确定我是否需要它。

现在，我只是试图从Express.js的表单中控制台记录数据，但出现错误

[0] ReferenceError: request is not defined

我的server.js文件（Express.js）

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
const port = process.env.PORT || 5000;

app.use(
  bodyParser.urlencoded({
    extended: true
  })
);

app.use(bodyParser.json());
app.post("/api/formdata", function(req, res) {
  var name = request.body.name;
  var whitdrawal = request.body.whitdrawal;
  var reason = request.body.reason;
  console.log("Hentet data", name, whitdrawal, reason);
});

app.get("/api/hello", (req, res) => {
  res.send({ express: "Denne meldingen kommer fra Express.js backend" });
});
app.get("/api/balance", (req, res) => {
  console.log("Hei fra balanse API punktet");
});

app.listen(port, () => console.log(`Back end is listening on port ${port}`));

我的React组件

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import axios from "axios";

class MoneyForm extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
      whitdrawal: "",
      reason: ""
    };
    this.handleEvent = this.handleEvent.bind(this);
    {
      /* check if can be removed */
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit = e => {
    e.preventDefault();
    // get our form data out of state
    const { name, whitdrawal, reason } = this.state;

    axios.post("/api/formdata", { name, whitdrawal, reason }).then(result => {
      console.log(this.name);
      console.log(name);
    });
  };

  render() {
    const { name, whitdrawal, reason } = this.state;
    return (
      <React.Fragment>
        <CssBaseline /> {/*https://material-ui.com/style/css-baseline */}
        <form onSubmit={this.handleSubmit} method="POST" action="/api/formdata">
          <br />{" "}
          {/* Bytt ut med CSS block elementer eller noe slikt, bytt name på form fields til å hentes via JS  */}
          <TextField
            required
            id="standard-required"
            label="Navn"
            className="tekstfelt"
            margin="normal"
            value={name}
            name="name"
            onChange={e => this.handleEvent(e)}
          />
          <br />
          <TextField
            required
            id="standard-required"
            label="Witdhdrawal amount"
            className="tekstfelt"
            margin="normal"
            value={whitdrawal}
            name="whitdrawal"
            onChange={e => this.handleEvent(e)}
          />
          <br />
          <TextField
            required
            id="standard-required"
            label="Reason"
            className="tekstfelt"
            margin="normal"
            value={reason}
            name="reason"
            onChange={e => this.handleEvent(e)}
          />
          <br />
          <Button
            type="submit"
            variant="contained"
            color="primary"
            className="Knapp"
          >
            Penger
          </Button>
        </form>
        <p>
          Name: {this.state.name} <br />
          Witdhdrawal amount: {this.state.whitdrawal} <br />
          Reason: {this.state.reason}
        </p>
      </React.Fragment>
    );
  }
}
export default MoneyForm;

我设法在React前端显示来自Express的消息，因此从Express到React的通信有效。 如果有帮助，我很乐意发布我的package.json文件。 不确定您需要什么信息，请随时询问其他详细信息/代码。

Answer 1

[0] ReferenceError：请求未定义

这是一个错字

app.post("/api/formdata", function(req, res) {
  var name = req.body.name;  //fixed
  var whitdrawal = req.body.whitdrawal; //fixed
  var reason = req.body.reason; //fixed
  console.log("Hentet data", name, whitdrawal, reason);
});