Reactjs AxiosからPOSTリクエスト

Question

こんにちは、私はreactisを使ってPOSTリクエストを試みていますが、エラーが発生しましたが、すべてのドキュメントを調べましたが、エラーは解決されません。

キャッチされない（約束で）エラー：要求はステータスコードで失敗しましたcreateErrorで400 （：4621）、：（bundle.jsでevalの15：15）沈降で （evalのここ

は私のエラーです、18：12） XMLHttpRequest.handleLoadで（（bundle.jsで評価：4609）：77：（4615 bundle.js）にて7）

ここに私Reactjsコード：

import React from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import TextField from 'material-ui/TextField'; 
import axios from 'axios'; 
const style = { 
margin: 15, 
marginLeft: 600 
}; 
export default class Register extends React.Component { 
constructor(props) { 
    super(props); 
    this.onSubmit=this.handleSubmit.bind(this); 
} 


handleSubmit(e) { 
    e.preventDefault(); 
    var self = this; 
    var data = new FormData(); 
    const payload = { 
    id: 111, 
    studentName: 'param', 
    age: 24, 
    emailId: 2 
}; 
data.append("myjsonkey", JSON.stringify(payload)); 

axios('http://localhost:8083/students',{ 
    method: 'POST', 
    body: data, 
    headers: { 
    // 'Authorization': `bearer ${token}`, 
    'Content-Type': 'application/json' 
    } 
}) 
    .then(function(response) { 
     return response.json() 
    }).then(function(body) { 
     console.log(body); 
    }); 
} 

render() { 
    return (
    <form onSubmit={this.onSubmit}> 
    <div style={style}> 
    <TextField ref='id' 
    hintText="Enter Student id" 
    floatingLabelText="id" 
    /> 
    <br/> 
    <TextField ref='sname' 
    hintText="Enter your Last Name" 
    floatingLabelText="StudentName" 
    /> 
    <br/> 
    <TextField ref='age' 
    hintText="Enter your Age" 
    floatingLabelText="age" 
    /> 
    <br/> 

    <TextField ref='emailId' 
    hintText="Enter your Email" 
    floatingLabelText="emailId" 
    /> 
    <br/> 
    <br/> 
    <input type="submit" /> 


    </div> 
     </form> 


    ); 
} 


} 

Answer 1

フォームデータを送信する必要はありません

var data = new FormData(); 

だけで行うには、経由axiosに

axios('http://localhost:8083/students',{ 
    method: 'POST', 
    data : payload, 
    headers: { 
    // 'Authorization': `bearer ${token}`, 
    'Content-Type': 'application/json' 
    } 
}) 

簡単な方法をJSONを渡す：

axios.post('http://localhost:8083/students',payload).then(...) 

Answer 2

axios apiの確認POSTリクエストを作成する正しい方法は次のとおりです。

const payload = { 
    id: 111, 
    studentName: 'param', 
    age: 24, 
    emailId: 2 
} 

axios({ 
    method: 'post', 
    url: '/user/12345', 
    data: payload, // you are sending body instead 
    headers: { 
    // 'Authorization': `bearer ${token}`, 
    'Content-Type': 'application/json' 
    }, 
}) 

Answer 3

var authOptions = { 
    method: 'post', 
    url: 'https://exam.com/apps', 
    data: JSON.stringify({"name": "ddd"});, 
    headers: { 
     'Content-Type': 'application/json' 
     }, 
    json: true 
    }; 
axios(authOptions) 
    .then((response) => { 
     console.log(response); 
     }) 
    .catch((error) => { 
     alert(error) 
     })