使用Reactjs的Axios发布表单

本文介绍了使用Reactjs的Axios发布表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

所以我在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.... }); }