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>
);
}
}