Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

URL herokuapp - Bad Request

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>
    );
  }
}
2 respostas

Opa, já deu certo? Acabei de acessar e ta no ar. Mil perdões pela demora.

solução!

Boa Tarde Alberto,

Desculpe eu pela demora para responder. Não tinha visto.

Sim deu certo. Muito obrigado.