Post no heroku erro (500) ao fazer o cadastro

Fala aí Caio, tudo bem? Consegue mandar o erro completo? Para isso, antes de realizar a requisição abre o console do seu navegador e procura por uma aba chamada "Rede" (Network em inglês).

Uma vez que você estiver nela, ai você faz a requisição, quando der o erro você irá ver uma linha vermelha, clique sobre ela e pegue as informações de erro referente a resposta da API.

Fico no aguardo.

As informações da unica linha com erro são essas

{timestamp: 1560562965060, status: 500, error: "Internal Server Error",…}
error: "Internal Server Error"
exception: "javax.validation.ConstraintViolationException"
message: "Validation failed for classes [br.com.caelum.cdcreact.models.Livro] during persist time for groups [javax.validation.groups.Default, ]↵List of constraint violations:[↵    ConstraintViolationImpl{interpolatedMessage='may not be null', propertyPath=autor, rootBeanClass=class br.com.caelum.cdcreact.models.Livro, messageTemplate='{javax.validation.constraints.NotNull.message}'}↵]"
path: "/api/livros"
status: 500
timestamp: 1560562965060

Eu que agradeço.

Para facilitar vou estar botando o código completo também

import $ from "jquery";
import InputCustomizado from "./componentes/InputCustomizado"
import React from 'react';
import PubSub from 'pubsub-js';
import TratadorErros from './TratadorErros'

class FormularioLivro extends React.Component {
  constructor(props) {
    super(props);
    this.state = {titulo: '', preco: '', autorId: ''};
    this.setTitulo = this.setTitulo.bind(this);
    this.setPreco = this.setPreco.bind(this);
    this.setAutorId = this.setAutorId.bind(this);   
    this.handleLivroSubmit = this.handleLivroSubmit.bind(this);

  }

  setTitulo(e) {
    this.setState({titulo: e.target.value});
  }

  setPreco(e) {
    this.setState({preco: e.target.value});
  }

  setAutorId(e) {
    this.setState({autorId: e.target.value});
  }


  handleLivroSubmit(e) {
    e.preventDefault();
    var titulo = this.state.titulo.trim();
    var preco = this.state.preco.trim();
    var autorId = this.state.autorId;

    $.ajax({
      url: 'http://cdc-react.herokuapp.com/api/livros',
      contentType: 'application/json',
      dataType: 'json',
      type: 'post',
      data: JSON.stringify({titulo:titulo,preco:preco,autorId:autorId}),
      success: function(novaListagem) {
          PubSub.publish( 'atualiza-lista-livros',novaListagem);            
          this.setState({titulo:'',preco:'',autorId:''});
          console.log("sucesso!");
      }.bind(this),
      error: function(resposta){
        if(resposta.status === 400){
          new TratadorErros().publicaErros(resposta.responseJSON);
            console.log("erro");
        }

      },
      beforeSend: function(){
        PubSub.publish("limpa-erros",{});
      }            
    });  

    this.setState({titulo: '', preco: '', autorId: ''});
  }

  render() {

    var autores = this.props.autores.map(function(autor){                                     
      return <option key={autor.id} value={autor.id}>{autor.autor.nome}</option>;
    });



    return (
      <div className="autorForm">
        <form className="pure-form pure-form-aligned" onSubmit={this.handleLivroSubmit}>
          <InputCustomizado id="titulo" name="titulo" label="Titulo: " type="text" value={this.state.titulo} placeholder="Titulo do livro" onChange={this.setTitulo} />
          <InputCustomizado id="preco" name="preco" label="Preco: " type="decimal" value={this.state.preco} placeholder="Preço do livro" onChange={this.setPreco} />
          <div className="pure-controls">
            <select value={ this.state.autorId } name="autorId" onChange={ this.setAutorId }>
             <option value="">Selecione</option>
              {autores}
           </select>
          </div>
          <div className="pure-control-group">                                  
            <label></label> 
            <button type="submit" className="pure-button pure-button-primary">Gravar</button>                                    
          </div>          
        </form>             
      </div>
    );
  }
} 

class TabelaLivros extends React.Component {

  render() {
    var livros = this.props.lista.map(function(livro){
      return(
          <tr key={livro.titulo}>
            <td>{livro.titulo}</td>
            <td>{livro.autor.nome}</td>
            <td>{livro.preco}</td>
          </tr>
        );
      });


    return(
      <table className="pure-table">
        <thead>
          <tr>
            <th>Titulo</th>
            <th>Autor</th>
            <th>Preco</th>
          </tr>
        </thead>
        <tbody>
          {livros}
        </tbody>
      </table>
    );
  }
}

export default class LivroBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {lista : [],autores:[]};
  }

  componentDidMount() {
    $.ajax({
      url: "http://cdc-react.herokuapp.com/api/livros",
      dataType: 'json',
      success: function(data) {
        this.setState({lista: data});
      }.bind(this)
    });

    $.ajax({
      url: "http://cdc-react.herokuapp.com/api/livros",
      dataType: 'json',
      success: function(data) {
        this.setState({autores: data});
      }.bind(this)
    });

    PubSub.subscribe('atualiza-lista-livros', function(topicName,lista){
      this.setState({lista:lista});
    }.bind(this));    
  }


  render() {
    return(
      <div>
        <div className="header">
          <h1>Cadastro de Livros</h1>
        </div>
        <div className="content" id="content">
          <div>
          <FormularioLivro autores={this.state.autores}/>
          <TabelaLivros lista={this.state.lista}/>
          </div>
        </div>
      </div>
    );
  }
}

Fala ai Caio, tudo bem? Pelo erro que a API retornou:

"Validation failed for classes [br.com.caelum.cdcreact.models.Livro] during persist time for groups [javax.validation.groups.Default, ]↵List of constraint violations:[↵ ConstraintViolationImpl{interpolatedMessage='may not be null', propertyPath=autor, rootBeanClass=class br.com.caelum.cdcreact.models.Livro, messageTemplate='{javax.validation.constraints.NotNull.message}'}↵]"

Parece que você não está enviando as informações do autor.

Repare no erro:

interpolatedMessage='may not be null', propertyPath=autor

A propriedade autor não pode ser nula.

Espero ter ajudado.

Sim depois eu vi que estava pegando a Api diferente

 $.ajax({
      url: "http://cdc-react.herokuapp.com/api/livros",
      dataType: 'json',
      success: function(data) {
        this.setState({autores: data});
      }.bind(this)
    });

O certo seria

 $.ajax({
      url: "http://cdc-react.herokuapp.com/api/autores",
      dataType: 'json',
      success: function(data) {
        this.setState({autores: data});
      }.bind(this)
    });

Boa Caio, fico feliz que tenha conseguido resolver o problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.