Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Lista de autores não aparece no cadastro de Livros

O formulário para cadastro de livros é carregado, mas no seletor de autor não carrega a lista de autores.

Segue o código do arquivo "Livro.js":

import React, { Component } from 'react';
import $ from 'jquery';
import InputCustomizado from './componentes/InputCustomizado';
import PubSub from 'pubsub-js';
import TratadorErros from  './TratadorErros';

class FormularioLivro extends Component {

    constructor(){
        super();
        this.state = {titulo:'',preco:'',autorId:''};
        this.enviaForm = this.enviaForm.bind(this);        
        this.setTitulo = this.setTitulo.bind(this);
        this.setPreco = this.setPreco.bind(this);
        this.setAutorId = this.setAutorId.bind(this);        
    }

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

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

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


    enviaForm(evento){
        evento.preventDefault();    

        $.ajax({
            url:'http://localhost:8080/api/livros',
            contentType:'application/json',
            dataType:'json',
            type:'post',
            data: JSON.stringify({titulo:this.state.titulo,preco:this.state.preco,autorId:this.state.autorId}),
            success: function(novaListagem) {
                PubSub.publish('atualiza-lista-livros',novaListagem);
                this.setState({titulo:'',preco:'',autorId:''});
            }.bind(this),
            error: function(resposta) {
                if (resposta.status === 400) {
                    new TratadorErros().publicaErros(resposta.responseJSON);
                }
            },
            beforeSend: function() {
                PubSub.publish("limpa-erros",{});
            }
        });        

    }    

    render(){

        return (
        <div className="pure-form pure-form-aligned">
        <form className="pure-form pure-form-aligned" onSubmit={this.enviaForm} method="post">
        <InputCustomizado id="titulo" type="text" name="titulo" value={this.state.titulo} onChange={this.setTitulo} label="Título"/>
        <InputCustomizado id="Preco" type="text" name="preco" value={this.state.preco} onChange={this.setPreco} label="Preço"/>
        <div className="pure-control-group">
        <label thmlFor="autorId">Autor</label>
            <select value={this.state.autorId} name="autorId" id="autorId" onChange={this.setAutorId}>
                <option value="">Selecione autor</option>
                {
                    this.props.autores.map(function(autor){
                        return <option value={autor.id}>{autor.nome}</option>
                    })
                }
            </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 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.nome}</td>
                            </tr>
                                );
                            })
                        }
                    </tbody>
                </table>
            </div>
            );
    }
}

export default class LivroBox extends Component{

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

    componentDidMount(){
        $.ajax({
            url:'http://localhost:8080/api/livros',
            dataType: 'json',
            success:function(resposta) {
                this.setState = ({lista:resposta});
            }.bind(this)
        });

        $.ajax({
            url:'http://localhost:8080/api/autores',
            dataType: 'json',
            success:function(resposta) {
                this.setState = ({autores: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">
            <FormularioLivro autores={this.state.autores}/>
            <TabelaLivros lista={this.state.lista}/>
            </div>
        </div>
        );
    }
}
3 respostas

Fala ai Anderson, tudo bem? Antes de tentar lhe ajudar eu gostaria de entender o motivo para você estar fazendo o curso antigo de React.

Pergunto isso porque o mesmo foi regravado e atualizado:

https://cursos.alura.com.br/course/react-componentes-reutilizaveis

Sugiro seu curso atual e começar o novo.

Abraços e bons estudos.

Olá Matheus Castiglioni , a resposta de porque as pessoas estão fazendo o curso antigo de React, é porque este é o curso que vocês colocam na formação React da alura... os 3 cursos antigos. Percebi isso agora que eu estou com problemas (a tal da API em Java que não roda, ao menos no Windows) e só assim descobri que existe um vídeo novo... O nome do vídeo também confunde, parece que é algo para se fazer apenas após fazer os cursos "Básicos" antigos.

Fala Gabriel, obrigado pelo feedback, vou mandar pedir para a galera realizar a atualização da formação de React.

Abraços e bons estudos.