Estou tentando fazer algumas implementações na TimeLine porém, percebi que o metodo render() está sendo chamado duas vezes. Existe alguma forma de impedir o componente de renderizar duas vezes?
import React, { Component } from 'react';
import FotoItem from './FotoItem';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import TimelineApi from '../logicas/TimelineApi';
import {connect} from 'react-redux';
class TimeLine extends Component {
constructor(props){
super(props);
this.login = this.props.login;
}
carregarFotos(){
let urlPerfil;
if(this.login === undefined)
urlPerfil = `https://instalura-api.herokuapp.com/api/fotos?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`;
else
urlPerfil = `https://instalura-api.herokuapp.com/api/public/fotos/${this.login}`;
this.props.lista(urlPerfil);
}
componentDidMount(){
this.carregarFotos();
}
componentWillReceiveProps(nextProps){
if(nextProps.login !== this.login){
this.login = nextProps.login;
this.carregarFotos();
}
}
render(){
return (
<div className="fotos container">
<ReactCSSTransitionGroup
transitionName="timeline"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{
this.props.fotos.map(foto => <FotoItem key={foto.id} foto={foto} like={this.props.like} comenta={this.props.comenta}/>)
}
</ReactCSSTransitionGroup>
</div>
);
}
}
const mapStateToProps = state => {
console.log("Chamou");
return {fotos: state.timeline}
}
const mapDispatchToProps = dispatch =>{
return {
like: (fotoId) =>{
dispatch(TimelineApi.like(fotoId))
},
comenta: (fotoId, Comentario) =>{
dispatch(TimelineApi.comenta(fotoId, Comentario));
},
lista: (urlPerfil) =>{
dispatch(TimelineApi.lista(urlPerfil));
}
}
}
const TimelineContainer = connect(mapStateToProps, mapDispatchToProps)(TimeLine);
export default TimelineContainer;