Problema ao tentar consumir o endpoint {/api/livros} da aplicação na nuvem Heroku

Estou com problemas ao realizar a tarefa da Aula 7, que é a listagem dos livros.

Ao tentar acessar a aba de livros, está ocorrendo este erro:

Objects are not valid as a React child (found: object with keys {id, nome, email}). If you meant to render a collection of children, use an array instead. in td (at Livro.js:29) in tr (at Livro.js:26) in tbody (at Livro.js:22) in table (at Livro.js:14) in div (at Livro.js:13) in TabelaLivros (at Livro.js:71) in div (at Livro.js:70) in div (at Livro.js:65) in LivroBox (created by Route) in Route (at src/index.js:15) in Switch (at src/index.js:14) in div (at App.js:30) in div (at App.js:12) in App (at src/index.js:13) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:12)

Acredito que é algo a respeito da formatação da tabela (?).

Meu código está da seguinte maneira:

class TabelaLivros extends Component {

    render(){
        return (
        <div>            
            <table className="pure-table">
              <thead>
                <tr>
                  <th>Título</th>
                  <th>Preço</th>
                  <th>Autor</th>
                </tr>
              </thead>
              <tbody>
                {
                  this.props.lista.map(function(livro){
                        return (
                            <tr key={livro.id}>
                                 <td>{livro.titulo}</td>
                                 <td>{livro.preco}</td>
                                  <td>{livro.autor}</td>
                            </tr>
                        );
                  })
                }
              </tbody> 
            </table> 
        </div>                     
       );
    }
}

export default class LivroBox extends Component{

  constructor(){
    super();
    this.state = {lista : []}; 
  }

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

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

    render(){
        return (
              <div>    
              <div className="header">
                <h1>Cadastro de Livros</h1>
              </div>

              <div className="content" id="content">    
                  <TabelaLivros lista={this.state.lista}/>
              </div> 
            </div>
        );
    }

}