Entrar Ainda não tem acesso?
1
resposta

Cannot read property 'map' of undefined

Referente ao curso React parte 2: Container components e o ciclo de vida do react, no capítulo Deixando a timeline dinâmica, consumindo uma api com a fetch api e atividade 3- Consumo inicial da API - Parte 2

por Gabriel Louis Freitas Teixeira
| 105.1k xp | 1 posts
constructor(){
        super();
        this.state = {
            lista: [],
        }}      

    componentDidMount(){
        fetch('http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials')
        .then(response => response.json())
        .then(resData => {
            this.setState( {data: resData.results});
        })

    }

render(){
<div>
                      <table className="pure-table">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>Produto</th>
                                    <th>Quantidade</th>
                                </tr>
                            </thead>
                            <tbody>{
                                    this.props.lista.map(function(data){
                                    return (  
                                    <tr key={data.codMat}>
                                        <td>{data.codMat}</td>
                                        <td>{data.material}</td>
                                 <td>{data.qntMin}</td>
                                    </tr>
                                    );
                                })
                            }
                            </tbody>
                        </table>
                    </div>
}

Esse é o codigo que eu to rodando para tentar receber os dados dessa API e colocar numa tabela, porém ta aparecendo o erro "TypeError: Cannot read property 'map' of undefined" quando tento renderizar

1 resposta
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Gabriel, beleza? Seu problema está em dois lugares, o primeiro é na hora de pegar o retorno da API e atualizar o estado, você está passando para um estado data ao invés de passar para o estado lista, portanto, o correto seria:

componentDidMount() {
    fetch('http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials')
    .then(response => response.json())
    .then(resData => {
        this.setState( {lista: resData.results});
    })
}

Agora o segundo problema está onde você pega a referência de lista para fazer o .map, o correto seria pegar do state e não das props, o correto seria:

<tbody>
    {
        this.state.lista.map(function(data) {
            return (
                <tr key={data.codMat}>
                    <td>{data.codMat}</td>
                    <td>{data.material}</td>
                    <td>{data.qntMin}</td>
                </tr>
            );
        })
    }
</tbody>

Espero ter ajudado