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