Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Problemas na exibição dos autores, no cadastro de livros.

O código está compilando e não apresenta erros. Porém, na form de cadastro de livros, não está exibindo o nome dos autores no select. OBS: A requisição Ajax, retorna uma array vazio. Mas, estou conseguindo acessar ao endereço http://cdc-react.herokuapp.com/api/autores' normalmente e existem dados lá.

class FormularioLivro extends Component{

     constructor(props){
        super(props);
        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);
    }

    enviaForm(evento){
        evento.preventDefault();  
        console.log(this);  
        $.ajax({
            url:'http://cdc-react.herokuapp.com/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", []);
            }    
        });
    }

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

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

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

    render(){
        return(
            <div className="pure-form pure-form-aligned">
                <form className="pure-form pure-form-aligned" onSubmit={this.enviaForm}>

                  <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 htmlFor="autorId">Autor</label> 
                            <select value={this.state.autorId} name="autorId" onChange={this.setAutorId}>
                                <option value="">Selecione o autor</option>
                                {
                                    this.props.autores.map(function(autor){
                                        return <option value={autor.id}>{autor.nome}</option>;
                                    })
                                }
                            </select>             

                    </div>

                  <InputSubmit label="Gravar"/>

                </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:[]};

    }

    componentWillMount(){
        $.ajax({
            url:'http://cdc-react.herokuapp.com/api/livros',
            dataType:'json',
            success:function(resposta){

                this.setState({lista:resposta});
            }.bind(this)
        });


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


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

    }  

    render(){
        return(
            <div>
                <div id="main">
                    <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>                
            </div>
        );
    }
}
5 respostas

Olha, bem estranho. Só vendo o código não consegui descobrir.. tem como disponibilizar no github e postar o link aqui?

Alberto, o código pode ser acessado neste link: https://github.com/vscatarino/cdc-admin

Boa noite, Alberto!

Alguma solução?!

solução!

Oi Vinicius, temos uma solução sim, desculpe a demora.

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

Aqui faltou um "c" a mais na propriedade success :). O callback não está sendo chamado, por isso que a lista não está sendo atualizada. Outro detalhe é que tem um console.log(this.props.autores.nome)... esse também não funciona, já que autores é um vetor. Mais uma vez, desculpa pela demora.

Alberto, Obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software