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

TypeError: this.props.lista.map is not a function

Estou tendo este erro desde a implementação final da aula 4. Segui exatamente os mesmos passos e conferi várias vezes. A diferença é que na aula 4 ao invés de estar com this.props.lista.map estava com this.state.lista.map.

Segue o código:

App.js

import React, { Component } from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import './css/main.css';

import {AutorBox} from './Autor';

class App extends Component {

    render() {
        return (
            <div id="layout">
                <a href="#menu" id="menuLink" className="menu-link">
                    <span></span>
                </a>

                <div id="menu">
                    <div className="pure-menu">
                        <a className="pure-menu-heading" href="">Company</a>

                        <ul className="pure-menu-list">
                            <li className="pure-menu-item"><a href="" className="pure-menu-link">Home</a></li>
                            <li className="pure-menu-item"><a href="" className="pure-menu-link">Autores</a></li>
                            <li className="pure-menu-item"><a href="" className="pure-menu-link">Livros</a></li>
                        </ul>
                    </div>
                </div>

                <div id="main">
                    <div className="header">
                    <h1>Cadastro de Autores</h1>
                </div>
                <div className="content top-spacing" id="content">
                <AutorBox/>
                </div>
            </div>
        </div>
    );
  }
}

export default App;
7 respostas

Autor.js

import React, { Component } from 'react';

import $ from 'jquery';

import InputCustomForm from './components/InputCustomForm';
import ButtonCustomForm from './components/ButtonCustomForm';

class FormularioAutores extends Component {
    constructor() {
        super();
        this.state = {nome:'', email: '', senha: ''};
        this.cadastraAutor = this.cadastraAutor.bind(this);
        this.setNome = this.setNome.bind(this);
        this.setEmail = this.setEmail.bind(this);
        this.setSenha = this.setSenha.bind(this);
    }

    cadastraAutor(event) {
        event.preventDefault();

        $.ajax({
            url: "http://localhost:8080/api/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(response) {
                this.props.callbackAtualiza(response);
            }.bind(this),
            error: function(response) {
                console.log('Erro');
            }
        });
    }

    setNome(event) {
        this.setState({nome:event.target.value});
    }

    setEmail(event) {
        this.setState({email:event.target.value});
    }

    setSenha(event) {
        this.setState({senha:event.target.value});
    }

    render() {
        return(
            <div className="pure-form pure-form-aligned">
                <form className="pure-form pure-form-aligned" onSubmit={this.cadastraAutor} method="post">
                <InputCustomForm id="nome" type="text" name="nome" label="Nome" value={this.state.nome} onChange={this.setNome}/>
                <InputCustomForm id="email" type="email" name="email" label="E-mail" value={this.state.email} onChange={this.setEmail}/>
                <InputCustomForm id="senha" type="password" name="senha" label="Senha" value={this.state.senha} onChange={this.setSenha}/>
                <ButtonCustomForm label="" buttonText="Gravar"/>
                </form>
            </div>
        );
    }
}

class TabelaAutores extends Component {
    render() {
        return(
            <div>
                <table className="pure-table">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>E-mail</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.props.lista.map(function(autor) {
                                return (
                                    <tr key={autor.id}>
                                        <td>{autor.nome}</td>
                                        <td>{autor.email}</td>
                                    </tr>
                                );
                            })
                        }
                    </tbody>
                </table>
            </div>
        );
    }
}

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

    componentDidMount() {
        $.ajax({
            url: "http://localhost:8080/api/autores",
            dataType: "json",
            success: function(response) {
                this.setState({lista:response});
            }.bind(this)
        });
    }

    atualizaListagem(novaLista) {
        this.setState({lista:novaLista});
    }

    render() {
        return (
            <div>
                <FormularioAutores callbackAtualiza={this.atualizaListagem}/>
                <TabelaAutores lista={this.state.lista}/>
            </div>
        );
    }
}
solução!

Parece que você passou o argumento correto mesmo. O que eu veria é o conteúdo do this.state.lista depois que você chama o setState...

Eu não consegui logar após o setState. Antes do setState, conseguia logar o this.state. Após, tudo isso é mostrado no console:

Autor.js:79 Uncaught TypeError: this.props.lista.map is not a function
    at TabelaAutores.render (Autor.js:79)
index.js:2178 The above error occurred in the <TabelaAutores> component:
    in TabelaAutores (at Autor.js:121)
    in div (at Autor.js:119)
    in AutorBox (at App.js:34)
    in div (at App.js:33)
    in div (at App.js:29)
    in div (at App.js:12)
    in App (at index.js:7)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Se for melhor pra visualizar algum arquivo, segue o repositório no github: https://github.com/matheussartori/react-system

estou tendo o mesmo problema, só que na aula 05

Então pelo visto deve ser algo relacionado a versão do React...

Eu corrigi o problema. Comigo, é que no .map eu nao tava passando um array.

No caso, por culpa de um erro no código.

O problema estava relacionado a API, no caso, ao meu computador. Reinstalei o JAVA, e agora está funcionando normalmente. Obrigado pela ajuda!

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