реакция отправляет данные на консоль, но данные не могут сделать ее mysql базой данных - PullRequest
Новая
       5

реакция отправляет данные на консоль, но данные не могут сделать ее mysql базой данных

0 голосов
/ 04 февраля 2020

У меня проблема с отправкой данных формы на консоль chrome, но полезная нагрузка не попадает в базу данных sql при запуске запроса. это как я настроил топор ios в форме, которая препятствует срабатыванию полезной нагрузки? или это в моем запросе app.post в бэкэнде?

ошибка консоли

реагирование формы с использованием топора ios

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

express бэкэнд 

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

отсюда, я получаю это сообщение в моем терминале, и мои строки таблицы остаются пустыми, кроме автоматического -инкрементный идентификатор. 

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

пустые строки

1 Ответ

0 голосов
/ 04 февраля 2020

Проблема в вашем handleSubmit(). В частности, в настройке data / body для запроса топора ios POST. Вы устанавливаете значение 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.

...