Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Props redornando um valor undefined

Olá, amigos.

Estou me baseando nesse curso pra treinar e montar meu próprio clone (no caso, um do twitter)

Tudo estava ocorrendo bem, porém. Faço autenticação e retorno a timeline com dados do meu usuário e os tweets de quem ele segue. O problema surge quando eu repasso esses tweets para meu componente timeline.

Explicando minha estrutura: Eu tenho um componente APP, que faz as chamadas para recuperar a timeline e a repassa pra meus outros componentes USERINFO, que mostra os dados do usuário, e a TIMELINE, que imprime os tweets de sua timeline.

render() {
    return (    
      <div className="page">
          <Userbox timeline={this.state.timeline}/>
          <div className="timeline-wrapper">
              <TweetCreation />
              <Timeline timeline={this.state.timeline}/>
          </div>
      </div>
    );
  }

Porém, quando esses dados vão pra timeline, o console aparece com duas entradas, uma com 'underfined' e a outra com os dados que eu chamei. Como o React lê o underfined antes o programa lança uma exceção assim que ele tentar executar o map. Abaixo uma screen pra mostrar o que ocorre. Essa linha é apenas mostrando o avatar do usuário logado, como teste.

import React, {Component} from 'react';


export default class Timeline extends Component {

    constructor(){
        super();
    }

    render(){
        return(
            <div className="timeline">
                {
                    console.log(this.props.timeline.caminhoAvatar)
                }
                <Tweet />

            </div>
        );
    }
}

https://imgur.com/ExjoFRT

Sinceramente não sei mais o que posso fazer. :(

1 resposta
solução!

Yea! Consegui resolver sozinho.

Basicamente o que estava acontecendo é que meu render do componente APP estava sendo chamado duas vezes: uma no construtor e a outra no meu medodo mount, aí como na primeira vez ele estava sem os dados, acabava estourando o erro no componente interno.

Resolvi colocando uma variável de status no state e, assim que o fetch acaba, ele renderiza o meus componentes corretamente.

Construtor do meu App.js

constructor(){
    super();
    this.state = {
      timeline:'',
      loading: true
    };
  }

Render. Coloquei uma mensagem simples de LOADING. Ela não dura nem 1seg na tela, mas poderia ser substituida por um componente mais bonitinho. :P

render() {
    if(this.state.loading){
      return(<h1>LOADING...</h1>);
    }
    else{
      return (    
        <div className="page">
            <Userbox timeline={this.state.timeline}/>
            <div className="timeline-wrapper">
                <TweetCreation />
                <Timeline timeline={this.state.timeline.listaTweets}/>
            </div>
        </div>
      );
    }

Finalmente, meu setState assim que finaliza o fetch

this.setState({timeline:timeline,loading:false});