Olá,
Estou tentando usar o link do heroku ( http://cdc-react.herokuapp.com/api/autores ) como placeholder para fazer alguns testes.
Mas quando tento enviar está dando erro de bad request
POST http://cdc-react.herokuapp.com/api/autores 400 (Bad Request)
Esse é o codigo da minha pagina. Podem me ajudar?
Obrigado
/*
* HomePage
*
* This is the first thing users see of our App, at the '/' route
*
* NOTE: while this component should technically be a stateless functional
* component (SFC), hot reloading does not currently support SFCs. If hot
* reloading is not a necessity for you then you can refactor it and remove
* the linting exception.
*/
import React from 'react';
import { FormattedMessage } from 'react-intl';
import $ from 'jquery';
import messages from './messages';
import NavBar from 'components/NavBar';
import VerticalNav from 'components/VerticalNav';
export default class Input extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
constructor() {
super();
this.state = {lista:[], nome:'', email:''};
this.enviaForm = this.enviaForm.bind(this);
this.setNome = this.setNome.bind(this);
this.setEmail = this.setEmail.bind(this);
}
componentWillMount(){
$.ajax({
url:"http://cdc-react.herokuapp.com/api/autores",
dataType: 'json',
success:function(resposta){
//console.log(resposta);
this.setState({lista:resposta});
}.bind(this)
});
}
enviaForm(evento){
evento.preventDefault();
$.ajax({
url:'http://cdc-react.herokuapp.com/api/autores',
contentType:'application/json',
dataType:'json',
type:'POST',
data: JSON.stringify({nome:this.state.nome, email:this.state.email}),
success: function(resposta){
console.log(resposta);
console.log("enviado com sucesso");
this.setState({lista:resposta});
},
error: function(resposta){
console.log("erro");
}
});
}
setNome(evento){
this.setState({nome: evento.target.value});
}
setEmail(evento){
this.setState({email: evento.target.value});
}
render() {
return (
<div>
<NavBar />
<div className="row ml-0 mr-0">
<VerticalNav />
<div className="col-11 pl-0 pr-0">
<div className="container mt-5">
<div>
<form onSubmit={this.enviaForm}>
<div className="form-group">
<input type="text" id="nome" className="form-control" placeholder="Nome" value={this.state.nome} onChange={this.setNome} />
</div>
<div className="form-group">
<input type="email" id="email" className="form-control" placeholder="Email" value={this.state.email} onChange={this.setEmail} />
</div>
<button type="submit" className="btn btn-primary">Enviar</button>
</form>
</div>
{
this.state.lista.map(function(data){
return (
<div className="row mt-5" key={data.id}>
<div className="col-6"><b>Title:</b> {data.nome}</div>
<div className="col-6"><b>Body:</b> {data.email}</div>
</div>
);
})
}
</div>
</div>
</div>
</div>
);
}
}