3
respostas

App.js:234 Uncaught TypeError: this.state.lista.map is not a function

App.js:234 Uncaught TypeError: this.state.lista.map is not a function
    at App.render (App.js:234)
    at eval (ReactCompositeComponent.js:793)
    at measureLifeCyclePerf (ReactCompositeComponent.js:73)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:743)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:642)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:558)
    at Object.performUpdateIfNecessary (ReactReconciler.js:154)

código completo em: https://github.com/olimpiogilberto/react-front

3 respostas

código completo em https://github.com/olimpiogilberto/react-front

Boa noite, Giba! Como vai?

Veja o método componentDidMount() da classe App no arquivo App.js.

componentDidMount(){
     $.ajax({
        url:"http://192.168.0.10:3000/autores",
        dataType: 'json',
        success:function(resposta){    
        this.setState({lista:resposta});
        }.bind(this)
      } 
    );          
  }

Veja que nela vc atribui à ao atributo lista do estado do seu componente o valor obtido na resposta da requisição. Meu chute é que essa resposta não é um array fazendo com que vc obtenha esse erro.

Verifique qual é a resposta que vc está obtendo e em seguida, caso necessário faça as correções necessárias para que o atributo lista seja realmente um array. E veja se as coisas funcionam da forma como vc esperava.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Conforme código abaixo do construtor, lista é um array...acredito que oerro seja pq ao invés de usar o back em java do curso eu fiz o meu próprio back em nodejs

  constructor() {
    super();    
    this.state = {lista : [], nome:'', email:'', senha:''};
    this.enviaForm = this.enviaForm.bind(this);
    this.setNome = this.setNome.bind(this);
    this.setEmail = this.setEmail.bind(this);
    this.setSenha = this.setSenha.bind(this);
  }


código completo em https://github.com/olimpiogilberto/react-front
                        https://github.com/olimpiogilberto/react-back

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