【发布时间】：2018-11-10 02:13:54
【问题描述】：
所以我在 Axios 上有这个 post 方法，如果我提交这个，它说
未捕获（承诺中）错误：网络错误 在 createError (createError.js:16) 在 XMLHttpRequest.handleError (xhr.js:87)
如果我使用这种方法：
axios.post('http://localhost:5000/users', ({userid: this.state.userid})
它有效。但是，如果我在 axios 帖子中添加 2 个或更多 arg，它会再次出错：
axios.post('http://localhost:5000/users', ({userid: this.state.userid}, {fullname: this.state.fullname} ))
这是我的完整代码。如您所见，我尝试了不同的代码组合，并且仅在我仅传递 1 个 arg 时才有效。
import React from 'react';
import axios from 'axios';
// import { Form } from 'antd';
// import { List, Card, Form } from 'antd';
export default class FormUser extends React.Component {
// constructor(props) {
// super(props)
// this.state = {
state = {
userid: '',
fullname: '',
usergroup:'',
emailid: '',
mobile: '',
title: '',
};
handleChange = event => {
this.setState({ userid: event.target.value });
this.setState({ fullname: event.target.value });
this.setState({ usergroup: event.target.value });
this.setState({ emailid: event.target.value });
this.setState({ mobile: event.target.value });
this.setState({ title: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
// const userform = {userid: this.state.userid};
// const fullnameForm = {fullname: this.state.fullname};
// const usergroupForm = {usergroup: this.state.usergroup};
// const emailidForm = {emailid: this.state.emailid};
// const mobileForm = {mobile: this.state.mobile};
// const titleForm = {title: this.state.title};
axios.post('http://localhost:5000/users', ({userid: this.state.userid}, {fullname: this.state.fullname} ))
// { {userid: this.state.userid}, {fullname: this.state.fullname} , usergroup: this.state.usergroup, emailid: this.state.emailid, mobile: this.state.mobile, title: this.state.title })
// { userform, fullnameForm, usergroupForm, emailidForm, mobileForm, titleForm })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>User Project ID: <input type="text" name="userid" onChange={this.handleChange}/></label><br/>
<label>Full Name: <input type="text" name="fullname" onChange={this.handleChange}/></label><br/>
<label>User Group: <input type="text" name="usergroup" onChange={this.handleChange}/></label><br/>
<label>Email: <input type="text" name="emailid" onChange={this.handleChange}/></label><br/>
<label>Mobile: <input type="text" name="mobile" onChange={this.handleChange}/></label><br/>
<label>Title: <input type="text" name="title" onChange={this.handleChange}/></label>
<button type="submit">Add</button>
</form>
)
}
}
Express 上的 AXIOS POST
app.post('/users', function (req, res) {
var postData = req.body;
// postData.created_at = new Date();
connection.query("INSERT INTO users SET ?", postData, function (error, results, fields) {
if (error) throw error;
console.log(results.insertId);
res.end(JSON.stringify(results));
});
});
【问题讨论】：
-
与实际问题无关，但使用这样的
handleChange处理程序，您的所有状态字段最终都将具有相同的值。此外，由于 没有value属性，因此它们不受控制，这可能不是您想要的。 -
我应该改成这个吗？
-
我建议（重新）阅读表单上的 React 文档。 reactjs.org/docs/forms.html
标签： javascript reactjs rest post axios