4
respostas

Cannot read property 'login' of undefined

A minha variável props está vindo vazia. Removi o parâmtro login da Timeline e coloquei o console.log para ver o valor da props e o resultado foi: {} Já tentei de tudo e não resolve. Alguém poderia ajudar?

segue o link do meu projeto no github: https://github.com/fmarsico/instalura

Obrigado

import React, { Component } from 'react';
import Header from './componentes/Header';
import Timeline from './componentes/Timeline';

class App extends Component {

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

export default App;



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


export default class Timeline extends Component{

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

  carregaFotos(){
    console.log(localStorage.getItem('auth-token'));
    let urlPerfil;
    if(this.login === undefined){
      urlPerfil = `http://localhost:8080/api/fotos?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`;
    }else{
      urlPerfil = `http://localhost:8080/api/public/fotos/${this.login}`
    }
    fetch(urlPerfil)
    .then(response => response.json())
    .then(fotos => {
      this.setState({fotos:fotos});
    });

  }

  componentDidMount(){
    this.carregaFotos();
  }

  componentWillReceiveProps(nextProps){
    if(nextProps.login !== undefined){
      this.login = nextProps.login;
      this.carregaFotos();
    }
  }

  render(){
    return(

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

      </div>

    );

  }

}


import React, { Component } from 'react';
import { Link } from "react-router-dom";


class FotoAtualizacoes extends Component{

  render(){

    return(
      <section className="fotoAtualizacoes">
        <a href="#" className="fotoAtualizacoes-like">Likar</a>
        <form className="fotoAtualizacoes-form">
          <input type="text" placeholder="Adicione um comentário..." className="fotoAtualizacoes-form-campo"/>
          <input type="submit" value="Comentar!" className="fotoAtualizacoes-form-submit"/>
        </form>

      </section>

    );
  }
}

class FotoInfo extends Component{

  render(){

    return(
      <div className="foto-info">
        <div className="foto-info-likes">
          {
          this.props.foto.likers.map(liker =>{
            return   <Link key={liker.login} to={`/timeline/${liker.login}`}> {liker.login},  </Link>
          })
          }

           curtiram

        </div>

        <p className="foto-info-legenda">
          <a className="foto-info-autor">autor </a>
          {this.props.foto.comentario}
        </p>

        <ul className="foto-info-comentarios">
          {
            this.props.foto.comentarios.map(comentario =>{
              return(
                <li className="comentario" key={comentario}>
                  <Link to={`/timeline/${comentario.login}`} className="foto-info-autor">{comentario.login} </Link>
                {comentario.texto}
                </li>
              );
            })
          }
        </ul>
      </div>

    );
  }
}

class FotoHeader extends Component{

  render(){
    return(
      <header className="foto-header">
        <figure className="foto-usuario">
          <img src={this.props.foto.urlPerfil} alt="foto do usuario"/>
          <figcaption className="foto-usuario">
            <Link to={`/timeline/${this.props.foto.loginUsuario}`}>
              {
                  this.props.foto.loginUsuario
              }
            </Link>
          </figcaption>
        </figure>
        <time className="foto-data">{this.props.foto.horario}</time>
      </header>
    );

  }

}

export default class FotoItem extends Component{

  render(){
    return(
      <div className="foto">
      <FotoHeader foto={this.props.foto}/>

        <img alt="foto" className="foto-src" src={this.props.foto.urlFoto}/>

        <FotoInfo foto={this.props.foto}/>
        <FotoAtualizacoes/>



      </div>


    );

  }
}
4 respostas

amigos eu olhei o seu código e adicionei isso e funcionou para mim.

function verificaAutenticacao(nextState, replace) { 


    const match = matchPath('/timeline', {
        path: nextState.match.url,
        exact: true
    });

    let valida = false;
    if (match !== null) {
        valida = match.isExact;
    }

    if (valida && localStorage.getItem('auth-token') === null) {

        return <Redirect to={{
            pathname: '/',
            state:  {msg: 'Faça login para acessar esta página'}
        }}/>
    }

    else if (!valida && localStorage.getItem('auth-token') != null) {       

        const matchEsp = matchPath(nextState.location.pathname, {
            path: '/timeline/:login',
            exact: true,
            strict: false
          })

          if (matchEsp !== null && matchEsp.isExact) {    

            return <App login={matchEsp.params.login} />
        }

    } 
    return <App />
  }`

Obrigado mas não funciona.

esqueci desse detalhe.. em APP.js <Timeline login={this.props.login}/>

funcionou, obrigado! Porém, confesso que ainda não entendi muito bem.