mysql - react 正在将数据发布到控制台，但数据未成功使其成为 mysql 数据库

Question

我有一个问题，我的表单数据发布到 chrome 控制台，但是当查询被触发时，有效负载没有进入 sql 数据库。我是如何以防止有效载荷发射的形式设置 axios 的？还是在后端的 app.post 请求中？

console error

使用 axios 的 react 形式

import React, { Component } from 'react'
import axios from 'axios';

export default class AddVisitorForm extends Component {

  constructor(props) {
    super(props)

    this.state = {
       lastName: '',
       firstName: ''
    }
  }


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

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

    const body = this.setState
    axios({
    method: 'post',
    url: 'http://localhost:8000/addactor',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
  }


  render() {
    const { lastName, firstName } = this.state
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
            <input defaultValue='last name' type="text" name="lastName" onChange={this.onChange } value={lastName} />
            <input defaultValue='first name' type="text" name="firstName" onChange={this.onChange } value={firstName} />
          <button type="submit">Add Guest</button>
        </form>
      </div>
    )
  }
};

快速后端

const Actor = require('./models/Actor');
const cors = require('cors');
const bodyParser = require('body-parser')

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

app.use((req, res, next)=>{
  //we say what we want to allow, you can whitelist IPs here or domains
  res.header("Access-Control-Allow-Origin", "*"); 
  //what kind of headers we are allowing
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");  

  //check for the options request from browsers
  //this will always be sent
  if(req.method === "OPTIONS"){
      //tell the browser what he can ask for
      res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
      //we just respond with OK status code
      return res.status(200).json({
          "statusMessage": "ok"
      });
  }

  next();
});



app.post('/addactor', function (req, res) {
  Actor.create({
    lastName: req.body.lastName,
    firstName: req.body.firstName
  })
  .then(function (Actor) {
    res.json(Actor);
  });
});



app.listen(8000);

Actor 模型

const sequelize = require('../database/sequelize');
const Sequelize = require("sequelize");

module.exports = sequelize.define('actor', {
  id: {
    primaryKey: true,
    type: Sequelize.INTEGER,
    field: 'actor_id',
    autoIncrement: true,
    allowNull: false
  },
  lastName: {
    field: 'last_name',
    defaultValue: '',
    type: Sequelize.STRING,
    allowNull: true
  },
  firstName: {
    field: 'first_name',
    defaultValue: '',
    type: Sequelize.STRING,
    allowNull: true
  },
  }, {
  timestamps: false
});

从这里开始，我在终端中收到一条此消息，除了自动递增的 ID 外，我的表行还留空。

Executing (default): INSERT INTO `actor` (`actor_id`,`last_name`,`first_name`) VALUES (DEFAULT,?,?);

empty rows

Answer 1

问题出在您的 handleSubmit() 中。特别是在 axios POST 请求的 data/body 设置中。您将 body 的值设置为函数 this.setState 的值，而不仅仅是组件的 this.state :

handleSubmit = e => {
  event.preventDefault();
  console.log(this.state);
  const body = this.state;
  axios({
    method: "post",
    url: "http://localhost:8000/addactor",
    data: body
  })
    .then(function(response) {
      console.log(response);
    })
    .catch(function(error) {
      console.log(error);
    });
};

基本上将 const body = this.setState 更改为 const body = this.state 。