Dans mon application de réagissage, j'ai un bouton qui tente d'accéder à mon arrière-plan avec une requête postale avec Axios:
const express = require('express');
const app = express();
const port = 3002;
const connection = require('./conf');
const cors = require('cors');
let bodyParser = require('body-parser')
app.use(cors());
app.use(bodyParser.urlencoded({extended: true}))
app.get('/api/comments', (req, res) => {
connection.query('SELECT * FROM comments', (err, results) => {
if (err) {
res.status(500).send('Erreur lors de la récupération des données');
} else {
res.json(results);
}
});
});
app.post('/api/comments/add', (req, res) => {
console.log(req.body, res)
}) ;
app.listen(port, (err) => {
if (err) {
throw new Error('Something bad happened...');
}
console.log(`Server is listening on ${port}`);
});
3 Réponses :
Essayez ceci:
Installez QS analyser avec et si ce ne fonctionne pas. Essayez Console.log () le corps dans le revue pour vérifier si les données sont correctement passées. NPM i qs , puis:
Vérifiez ci-dessous: (cela peut aider) strong> Lorsque vous utilisez les axios pour gérer les demandes d'API, vérifiez les en-têtes import React from 'react';
import axios from 'axios';
class CommentsForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
message: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
const {name, message} = this.state;
axios.post('http://localhost:3002/api/comments/add', {
name, // same syntax name: name
message // same syntax message: message
},{
headers:{
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token // if you use token
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
this.setState({
name: '',
message: ''
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
name="name"
type="text"
checked={this.state.name}
onChange={this.handleInputChange} />
<br />
<textarea
name="message"
type="text"
value={this.state.message}
onChange={this.handleInputChange} />
</form>
);
}
}
export default CommentsForm;
Je pense que votre back-end a besoin de EDIT Après que je lisez le Question droite, j'ai vu que ma réponse était complètement éteinte. Alors, voici une nouvelle. Quelques chèques: sinon, essayez ceci: app.post () gestionnaire a besoin d'un bit de fixation. Depuis le app.post () gestionnaire n'utilise pas res pour envoyer une réponse au client, vous obtenez un objet vide. Essayez d'ajouter une réponse au app.post () gestionnaire.
Soumettez-vous d'une forme ou par un organisme de récupération? Si par une fetch utilise:
app.use (express.json ()) pour analyser correctement la demande entrante.Le bouton qui maintient le dynamique OnClick n'est pas à l'intérieur d'un formulaire. Il suffit de prendre un état (commentaire) et d'essayer d'accéder à mon backend
Essayez d'ajouter ce middleware
app.use (bodyparser.json ()) aprèsapp.use (bodyparser.urlencoded ({étendu: vrai}))