O valor do autor. nome no select está em branco

var autores = this.props.autores.map(function(autor){

      return <option key={autor.id} value={autor.id}>{autor.nome}</option>;
    });


<select value={ this.state.autorId } name="autorId" onChange={ this.setAutorId }>
             <option value="">Selecione</option>
              {autores}
           </select>

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!");
      },
      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.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>
    );
  }
}

E o servidor está ficando fora do dar direto também.