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

Question

I'm trying to send some data from a React form to Express.js using POST, I've got some axios code in my React code but not sure I need it.

Right now I'm just trying to console log the data from the form in Express.js but I'm getting the error

[0] ReferenceError: request is not defined

My server.js file (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}`));

My React component

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;

I manage to show a message from Express in my React front end, so communication from Express to React works. I'd be happy to post my package.json files if that helps. Not sure exactly what info you guys need so please feel free to ask for additional details/code.

Answer 1

[0] ReferenceError: request is not defined

it's a typo

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);
});