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

Error: 'login' undefined

Já tenho um outro tópico como esse, mas infelizmente não foi respondido e não consigo acompanhar as aulas até resolver o erro.

Estou com o seguinte erro na aula 4 no vídeo 3: https://prnt.sc/he0v6i

Como também pode ver nesse tópico: https://cursos.alura.com.br/forum/topico-cannot-read-property-params-of-undefined-48516

O rapaz deu um console.log(this.props); e retornou apenas: { }

Também fiz a mesma coisa como mostra no print no primeiro link

OBS: Nas aulas está sendo usado React Router 3 e estou usando o 4

App.js


class App extends Component {

    render() {
        console.log(this.props);
        return (
                <div id="root">
                    <div className="main">
                        <Header />
                        <Timeline login={this.props.params.login}/>
                    </div>
                </div>
        );
    }
}

Timeline.js


export default class Timeline extends Component {

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

    componentDidMount() {

        let urlPerfil;

        if(this.props.login === undefined) {
            urlPerfil = `http://localhost:8080/api/fotos?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`;
        } else {
            urlPerfil = `http://localhost:8080/api/public/fotos/${this.props.login}`;
        }

        fetch(urlPerfil)
        .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>            
        );
    }
}
3 respostas

Oi Lucas, vamos tentar achar o erro, nem sempre é claro. Quando acontece o erro, algum parâmetro está sendo passado? Se não tiver, você pode verificar. Se a impressão retornou um objeto literal vazio, é pq realmente nada está sendo passado para o componente.

Caso você teste e não consiga achar, compartilha seu projeto no github que posso dar uma olhada.

Oi Alberto, pra ficar mais fácil de analisar, segue o projeto no github: https://github.com/lucasbrito1/instalura

solução!

Opa, pra eu poder continuar as aulas e terminar que faltava pouco, eu tive que colocar o React Router 3