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

TypeError: this.state.fotos.map is not a function

Estou tendo o erro "TypeError: this.state.fotos.map is not a function" quando tento atualizar a pagina após colocar o seguinte código na Timeline:

componentDidMount(){

        fetch(`https://instalura-api.herokuapp.com/api/fotos?X-AUTH-TOKEN=${localStorage.getItem("auth-token")}`)
        .then(response => response.json())
        .then(fotos => {
            console.log(fotos);

            this.setState({fotos:fotos})
        });
    }

Antes de alterar ele funciona, mas quando coloco a parte do token ele mostra o erro "TypeError: this.state.fotos.map is not a function" no navegador. O erro aparece como sendo no Timeline.js, no método render, na linha 23. Segue o código do Timeline.js:

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

export default class Timeline extends Component {

    constructor(){

        super();
        this.state = {fotos:[]};
    }

    componentDidMount(){

        fetch(`https://instalura-api.herokuapp.com/api/fotos?X-AUTH-TOKEN=${localStorage.getItem("auth-token")}`)
        .then(response => response.json())
        .then(fotos => {
            this.setState({fotos:fotos})
        });
    }

    render(){
        return (
        <div className="fotos container">
            {
                this.state.fotos.map(foto => <FotoItem key={foto.id} foto={foto}/>)
            }
        </div>            
        );
    }
}

Antes de colocar a parte do token no "componentDidMount", quando eu estou na página de login e entro com os dados, consigo navegar para a Timeline, mas onde deveria aparecer o token aparece uma linha vazia. E eu tenho que fazer pelo Herokuapp porquê o .jar deu problema pra mim desde o módulo 1 de react.

Retorno do console.log das fotos:

{timestamp: 1554295388297, status: 500, error: "Internal Server Error", exception: "java.lang.IllegalArgumentException", message: "JWT String argument cannot be null or empty.", …}
error: "Internal Server Error"
exception: "java.lang.IllegalArgumentException"
message: "JWT String argument cannot be null or empty."
path: "/api/fotos"
status: 500
timestamp: 1554295388297
__proto__: Object
3 respostas

Fala aí Hugo, tudo bem? Parece que você não enviou o token para a API, dai ela está dando erro.

Espero ter ajudado.

E onde eu tenho que alterar?

solução!

Puts, duas semanas sem fazer o curso porque não dá pra solucionar um problema. Complicado.

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