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.
