所以我在Axios上有这个post方法,如果我提交这个,它说
So I have this post method with Axios and if I submit this, it said
未捕获(承诺)错误:网络错误 在createError(createError.js:16) 在XMLHttpRequest.handleError(xhr.js:87)
Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:87)
如果我使用此方法:
axios.post('localhost:5000/users', ({userid: this.state.userid})有效.但是,如果我在axios帖子中添加2个或更多的arg,则会再次出现错误:
it works. But if I add 2 or more arg to the axios post it gets error again:
axios.post('localhost:5000/users', ({userid: this.state.userid}, {fullname: this.state.fullname} ))这是我的完整代码.如您所见,我尝试了不同的代码组合,并且只有在我仅传递1个arg的情况下,它才有效.
Here is my full code. As you can see I try different combinations of code, and it only works if I only pass 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('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
AXIOS POST on Express
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)); }); });每个状态的
推荐答案eventHandler.有什么办法可以使我做得更好? 是的,它会像这样
eventHandler for each state. Is there any way I can do this better? yes it would work something like this
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帖子的表格将可以执行以下操作
and about submission of the form your axios post would work something like this
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的Axios发布表单
发布评论