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

Erro no Publish

Professor pode me dar uma luz !! Estou aprendendo react na faculdade, porém é com a biblioteca axios js então resolvi acompanhar com o axios este curso em vez do JQUERY ( Ajax ) na hora de colocar o PubSub não estou conseguindo, está dando lista indefinida mais não estou entendendo o pq !!! Se tiver como me dar uma luz serei eternamente grato !!

import React, { Component } from 'react';
import FormularioAutor from './FormularioAutor';
import TabelaAutor from './TabelaAutor';

export default class AutorBox extends Component{
    render(){
        return(
            <div>
                <div className="header">
                    <h1>Cadastro de Autores</h1>
                </div>
                <div className="content" id="content">
                    <FormularioAutor />
                    <TabelaAutor />  
                </div>
            </div>
        )
    }
}

////////
import React, { Component } from 'react';
import axios from 'axios';
import InputForm from './InputForm';
import InputBotao from './InputBotao';
import PubSub from 'pubsub-js';

export default class FormularioAutor extends Component{
    constructor(){
        super();
        this.state ={nome:"",email:"",senha:""}
        this.cadastrar = this.cadastrar.bind(this);
      }

      cadastrar(e){
        e.preventDefault();
        axios.post("http://localhost:3000/autores",{nome:this.state.nome,email:this.state.email,senha:this.state.senha})
        .then((novaLista)=>{
            PubSub.publish("nova-lista",novaLista.data)
        })
        .catch((e) => { console.log('Erro ao recuperar os dados'+e)}); 
      }

    render(){
        return(
            <div className="pure-form pure-form-aligned">
              <form className="pure-form pure-form-aligned" method="post" onSubmit={this.cadastrar}>
                <InputForm htmlFor="nome" label="Nome" id="nome" tipo="text" name="nome" value={this.state.nome} onChange={(e)=>{
                      this.setState({nome:e.target.value} )}}/>
                <InputForm htmlFor="email" label="Email" id="email" tipo="email" name="email" value={this.state.email} onChange={(e)=>{
                      this.setState({email:e.target.value} )}}/>
                <InputForm htmlFor="senha" label="Senha" id="senha" tipo="password" name="senha" value={this.state.senha} onChange={(e)=>{
                      this.setState({senha:e.target.value} )}}/>
                <InputBotao tipo="submit" nome="Gravar"/>
              </form>             
            </div>
        )
    }
}
/////////
import React, { Component } from 'react';
import axios from 'axios';
import PubSub from 'pubsub-js';
export default class TabelaAutor extends Component{

  constructor(){
    super();
    this.state ={lista:[]}
  }
  componentDidMount() {
    axios.get("http://localhost:3000/autores")
    .then(response => { this.setState({lista: response.data})})
    .catch((e) => { console.log('Erro ao recuperar os dados'+e)})
    PubSub.subscribe("nova-lista",(topico,novaLista)=>{
      this.setState({lista:novaLista});
    });
  }
    render(){
        return(
            <div>            
            <table className="pure-table">
              <thead>
                <tr>
                  <th>Autor</th>
                  <th>Email</th>
                  <th>Senha</th>
                </tr>
              </thead>
              <tbody>
               {
                 this.state.lista.map((data)=>{
                   return(
                    <tr key={data.id}>
                      <td>{data.nome}</td>
                      <td>{data.email}</td>
                      <td>{data.senha}</td>
                    </tr>
                 )})
               }
              </tbody>
            </table> 
          </div> 
        );
    }
}

Erro ///// Uncaught TypeError: this.state.lista.map is not a function at TabelaAutor.render (TabelaAutor.js:29) at finishClassComponent (react-dom.development.js:14979) at updateClassComponent (react-dom.development.js:14934) at beginWork (react-dom.development.js:15840) at performUnitOfWork (react-dom.development.js:19745) at workLoop (react-dom.development.js:19786) at HTMLUnknownElement.callCallback (react-dom.development.js:147) ......

6 respostas

Oi Roger, tudo bem? O que o seu localhost:3000/autores tá retornando? O response.data é um array direto? Por que pode estar acontecendo de seu responde.data não ser um array e por isso o map vai dar problema.

No cadastrar, o seu axios.post vai enviar a requisição no then e estou na dúvida se a resposta dessa requisição te dá a lista de volta no response.data, se ele não retorna a lista, então você está atribuindo outra coisa pro lista que não é o array.

Eu verificaria essas duas coisas.

Ok, vc tem razão realmente não tinha dado um console log para ver o retorno. Porém não estou entendendo como eu resolveria esta questão. Vou tentar fazer sem usar o PubSub !!

Mudei todo meu código mesmo assim não está funcionando, não estou conseguido atualizar tela ao cadastrar um novo autor com o axios.

import React, { Component } from 'react';
import axios from 'axios';
import InputForm from './InputForm';
import InputBotao from './InputBotao';

class FormularioAutor extends Component{
    constructor(){
        super();
        this.state ={nome:"",email:"",senha:""}
        this.cadastrar = this.cadastrar.bind(this);
    }

      cadastrar(e){
        e.preventDefault();
        axios.post("http://localhost:3000/autores",{nome:this.state.nome,email:this.state.email,senha:this.state.senha})
        .then(this.props.atualizaListagem())
        .catch((e) => { console.log('Erro ao recuperar os dados'+e)})

      }

    render(){
        return(
            <div className="pure-form pure-form-aligned">
              <form className="pure-form pure-form-aligned" method="post" onSubmit={this.cadastrar}>
                <InputForm htmlFor="nome" label="Nome" id="nome" tipo="text" name="nome" value={this.state.nome} onChange={(e)=>{
                      this.setState({nome:e.target.value} )}}/>
                <InputForm htmlFor="email" label="Email" id="email" tipo="email" name="email" value={this.state.email} onChange={(e)=>{
                      this.setState({email:e.target.value} )}}/>
                <InputForm htmlFor="senha" label="Senha" id="senha" tipo="password" name="senha" value={this.state.senha} onChange={(e)=>{
                      this.setState({senha:e.target.value} )}}/>
                <InputBotao tipo="submit" nome="Gravar"/>
              </form>             
            </div>
        )
    }
}
 class TabelaAutor extends Component{

    render(){
        return(
            <div>            
            <table className="pure-table">
              <thead>
                <tr>
                  <th>Autor</th>
                  <th>Email</th>
                  <th>Senha</th>
                </tr>
              </thead>
              <tbody>
               {
                 this.props.lista.map((data)=>{
                   return(
                    <tr key={data.id}>
                      <td>{data.nome}</td>
                      <td>{data.email}</td>
                      <td>{data.senha}</td>
                    </tr>
                 )})
               }
              </tbody>
            </table> 
          </div> 
        );
    }
}



export default class AutorBox extends Component{
    constructor(){
        super();
        this.state={lista:[]}
        this.carregaDados = this.carregaDados.bind(this);
    }
    componentDidMount() {
        this.carregaDados();
    }

    carregaDados(){
        axios.get("http://localhost:3000/autores")
        .then(response => {
            this.setState({lista: response.data})})
        .catch((e) => { console.log('Erro ao recuperar os dados'+e)})
    }
    render(){
        return(
            <div>
                <div className="header">
                    <h1>Cadastro de Autores</h1>
                </div>
                <div className="content" id="content">
                    <FormularioAutor atualizaListagem={this.carregaDados}/>
                    <TabelaAutor lista={this.state.lista}/>  
                </div>
            </div>
        )
    }
}

Pois é agora fiz que nem o professor fez e mesmo assim nõ está dando certo, continua dando erro :

AutorBox.js:60 Uncaught TypeError: this.props.lista.map is not a function

Já estou ficando louco com isso ): Se alguém poder me dar uma luz agradeço !!

import React, { Component } from 'react';
import InputForm from './InputForm';
import InputBotao from './InputBotao';
import PubSub from 'pubsub-js';
import $ from 'jquery';

class FormularioAutor extends Component{
    constructor(){
        super();
        this.state ={nome:"",email:"",senha:""}
        this.cadastrar = this.cadastrar.bind(this);
    }

      cadastrar(e){
        e.preventDefault();
        $.ajax({
          url:'http://localhost:3000/autores',
          contentType:'application/json',
          dataType:'json',
          type:'post',
          data: JSON.stringify({nome:this.state.nome,email:this.state.email,senha:this.state.senha}),
          success: function(novaListagem){
             PubSub.publish('atualiza-lista-autores',novaListagem);
          },
          error: function(resposta){
            console.log("erro");
          }      
        });
      }

    render(){
        return(
            <div className="pure-form pure-form-aligned">
              <form className="pure-form pure-form-aligned" method="post" onSubmit={this.cadastrar}>
                <InputForm htmlFor="nome" label="Nome" id="nome" tipo="text" name="nome" value={this.state.nome} onChange={(e)=>{
                      this.setState({nome:e.target.value} )}}/>
                <InputForm htmlFor="email" label="Email" id="email" tipo="email" name="email" value={this.state.email} onChange={(e)=>{
                      this.setState({email:e.target.value} )}}/>
                <InputForm htmlFor="senha" label="Senha" id="senha" tipo="password" name="senha" value={this.state.senha} onChange={(e)=>{
                      this.setState({senha:e.target.value} )}}/>
                <InputBotao tipo="submit" nome="Gravar"/>
              </form>             
            </div>
        )
    }
}
 class TabelaAutor extends Component{

    render(){
        return(
            <div>            
            <table className="pure-table">
              <thead>
                <tr>
                  <th>Autor</th>
                  <th>Email</th>
                  <th>Senha</th>
                </tr>
              </thead>
              <tbody>
               {
                 this.props.lista.map((data)=>{
                   return(
                    <tr key={data.id}>
                      <td>{data.nome}</td>
                      <td>{data.email}</td>
                      <td>{data.senha}</td>
                    </tr>
                 )})
               }
              </tbody>
            </table> 
          </div> 
        );
    }
}



export default class AutorBox extends Component{
    constructor(){
        super();
        this.state={lista:[]}
    }
    componentWillMount(){
      $.ajax({
          url:"http://localhost:3000/autores",
          dataType: 'json',
          success:function(resposta){
            this.setState({lista:resposta});
          }.bind(this)
        }
      )
      PubSub.subscribe('atualiza-lista-autores', function(topico,novaLista){
        this.setState({lista:novaLista});
      }.bind(this));
      }
    render(){
        return(
            <div>
                <div className="header">
                    <h1>Cadastro de Autores</h1>
                </div>
                <div className="content" id="content">
                    <FormularioAutor/>
                    <TabelaAutor lista={this.state.lista}/>
                </div>
            </div>
        )
    }
}
solução!

Solucionado, é que eu estava usando outro tipo de api rest pq no começo do curso não tinha subido o jar dai resolvi usar um outro serviço. Obrigado.

Wow, desculpa a demora Roger, mas fico feliz que tenha solucionado o problema. Se precisar de mais alguma coisa é só chamar.

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