Привет, У меня проблемы с отправкой всех данных в моем запросе с использованием axios. Я создал node.js api, и теперь я хочу отправить регистрационные данные пользователя из моей формы, используя axios, и реагировать на js в качестве технологии внешнего интерфейса.
Я обновил свое состояние в реакции после отправки и теперь, когда я хочу отправить информацию с помощью 'Content-Type': 'application / x-www-form-urlencoded', мое firstName не отправлено (null), а последнее значение-местоположение получить '\ "' в конце.
Я проверил запрос в почтальоне, и он хорошо работает.
Любой совет?
мой маршрут node.js:
app.post('/users', (req, res) => {
const user = { firstName: req.body.firstName, lastName: req.body.lastName, age: req.body.age, photo: req.body.photo, email: req.body.email, description: req.body.description, hobbies: req.body.hobbies, location: req.body.location };
db.collection('users').insert(user, (err, result) => {
if (err) {
res.send({ 'error': 'An error has occurred' });
} else {
res.send(result.ops[0]);
}
});
});
регистрация реакции:
import React, { Component } from 'react';
import axios from 'axios';
class Register extends Component {
state = {
firstName: '',
lastName: '',
age: '',
email: '',
description: '',
hobbies: '',
location: '',
};
handleFirstNameChange = event => {
this.setState({
firstName: event.target.value,
});
}
handleLastNameChange = event => {
this.setState({
lastName: event.target.value,
});
}
handleEmailChange = event => {
this.setState({
email: event.target.value,
});
}
handleAgeChange = event => {
this.setState({
age: event.target.value,
});
}
handleDescriptionChange = event => {
this.setState({
description: event.target.value,
});
}
handleHobbiesChange = event => {
this.setState({
hobbies: event.target.value,
});
}
handleLocationChange = event => {
this.setState({
location: event.target.value,
});
}
handleSubmit = event => {
event.preventDefault();
const user = {
firstName: this.state.firstName,
lastName: this.state.lastName,
age: this.state.age,
email: this.state.email,
description: this.state.description,
hobbies: this.state.hobbies,
location: this.state.location,
};
//x-www-form
let formBody = [];
for (let property in user) {
let encodedKey = encodeURIComponent(property);
let encodedValue = encodeURIComponent(user[property]);
formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");
console.log(formBody);
axios.post(`http://localhost:8000/users`, { formBody }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div className="register">
<h2>Register</h2>
<form onSubmit={this.handleSubmit}>
<label htmlFor="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" onChange={this.handleFirstNameChange} />
<br/>
<label htmlFor="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" onChange={this.handleLastNameChange} />
<br/>
<label htmlFor="email">Email:</label>
<input type="text" id="email" name="email" onChange={this.handleEmailChange} />
<br/>
<label htmlFor="age">Age:</label>
<input type="text" id="age" name="age" onChange={this.handleAgeChange} />
<br/>
<label htmlFor="description">Description of myself:</label>
<input type="text" id="description" name="description" onChange={this.handleDescriptionChange} />
<br/>
<label htmlFor="hobbies">Hobbies:</label>
<input type="text" id="hobbies" name="hobbies" onChange={this.handleHobbiesChange} />
<br/>
<label htmlFor="location">Location:</label>
<input type="text" id="location" name="location" onChange={this.handleLocationChange} />
<br/>
<input type="submit" value="Register" />
</form>
</div>
);
}
}
export default Register;
результат базы данных в mLab:
{
"_id": {
"$oid": "5b3af97a10d5b622289ddbbc"
},
"firstName": null,
"lastName": "test",
"age": "222",
"photo": null,
"email": "test@gmail.com",
"description": "test",
"hobbies": "test",
"location": "test\"}"
}