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

Posted 2023-03-07

【中文标题】反应正在将数据发布到控制台，但数据未成功使其成为 mysql 数据库

【英文标题】：react is posting data to console, but data is not successfully making it mysql database

【发布时间】：2020-05-20 14:44:31

【问题描述】：

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

console error

使用 axios 反应表单

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

演员模型

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

【问题讨论】：

你能在console.log(req.body)里面app.post('/addactor'吗？

刚刚试过这个。这是终端中的响应。[Object: null prototype] 'function (partialState, callback) \n if (!(typeof partialState ': "== 'object' || typeof partialState === 'function' || partialState == null)) \n" + ' \n' + ' throw Error("setState(...): 需要一个状态变量对象来更新或者一个函数返回一个状态变量对象。"); \n' + ' \n' + ' \n' + '\n' + " this.updater.enqueueSetState(this, partialState, callback, 'setState');\n" + ''

我已经添加了答案。

【参考方案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。

【讨论】：

亚历山大，就是这样。哇。太感谢了。昨天我一遍又一遍地看着这段代码。

我没有足够的声望来投票，所以如果这个帖子对其他人有帮助，请给这个人我的投票。

很高兴听到。虽然您不能投票，但您可以通过单击复选标记将答案标记为“正确”。谢谢！