javascript - 带有 Reactjs 的 Axios 发布表单
问题描述
所以我在 Axios 上有这个 post 方法,如果我提交这个,它说
未捕获(承诺)错误:在 XMLHttpRequest.handleError (xhr.js:87) 的 createError (createError.js:16) 处出现网络错误
如果我使用这种方法:
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 个参数时才有效。
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>
)
}
}
快递上的 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));
});
});
解决方案
每个状态的事件处理程序。有什么办法可以做得更好吗?是的,它会像这样工作
import React, { Component } from 'react';
class UserForm extends Component {
constructor() {
super();
this.state = {
fname: '',
lname: '',
email: '',
};
}
onChange = (e) => {
/*
Because we named the inputs to match their
corresponding values in state, it's
super easy to update the state
*/
this.setState({ [e.target.name]: e.target.value });
}
render() {
const { fname, lname, email } = this.state;
return (
<form>
<input
type="text"
name="fname"
value={fname}
onChange={this.onChange}
/>
<input
type="text"
name="lname"
value={lname}
onChange={this.onChange}
/>
<input
type="text"
name="email"
value={email}
onChange={this.onChange}
/>
</form>
);
}
}
关于提交表单,你的 axios 帖子会像这样
onSubmit = (e) => {
e.preventDefault();
// get our form data out of state
const { fname, lname, email } = this.state;
axios.post('/', { fname, lname, email })
.then((result) => {
//access the results here....
});
}
推荐阅读
- reactjs - 在 Redux 中组合数字状态
- c# - 请求 MTU 不适用于 xamarin 表单
- typescript - 打字稿数组减少没有额外的参数
- java - JOptionPane 在 while 循环内
- javascript - 我不能使用导入/导出也不需要
- linux - Linux 补丁文件 - 补丁文件:没有这样的文件或目录?
- javascript - 以编程方式激活和停用 CreatableSelect 中的“创建字段”功能
- javascript - setInterval 没有更新我的时钟时间。手动刷新页面时时间显示和刷新
- javascript - 如何从数组元素中获取不同的组合?
- scala - SCALA - 子类型声明中的大括号