'Timeline.js' -' this.setState({fotos:this.state.fotos});' | React parte 2: Container components e o ciclo de vida do react

1
resposta

por Marcelo Palma de Noronha

| 161.7k xp | 158 posts

Oi.

No código:

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

 componentWillMount(){
      Pubsub.subscribe('timeline',(topico,fotos) => {
        this.setState({fotos});
      });

      Pubsub.subscribe('atualiza-liker',(topico,infoLiker) => {        
        const fotoAchada = this.state.fotos.find(foto => foto.id === infoLiker.fotoId);
        fotoAchada.likeada = !fotoAchada.likeada;

        const possivelLiker = fotoAchada.likers.find(liker => liker.login === infoLiker.liker.login);

        if(possivelLiker === undefined){
          fotoAchada.likers.push(infoLiker.liker);
        } else {
          const novosLikers = fotoAchada.likers.filter(liker => liker.login !== infoLiker.liker.login);
          fotoAchada.likers = novosLikers;
        }
        this.setState({fotos:this.state.fotos});

      });

Essa parte:

   this.setState({fotos:this.state.fotos});

Não entendi. O this.setState está modificando o valor de sua propriedade 'fotos' consigo mesmo? Parece-me um pouco estranho.

O que acontece aqui?

Não parece que houve modificações no this.state.fotos.

1 resposta

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

13/08/2019

Fala aí Marcelo, tudo bem? Vamos lá:

O que acontece aqui?

Quando chamamos a função setState dos componentes do React ele vai fazer um merge do estado atual + novo estado, imagine que você tem um estado atual:

class MeuComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            nome: 'Matheus'
        }
    }
}

Se a gente chamar o setState passando um novo objeto com a propriedade nome para ele, o React vai merger com o objeto atual, sendo assim:

this.setState({
    nome: 'Meu novo nome'
})

O valor agora de this.state.nome seria Meu novo nome.

Caso seu objeto tenha duas propriedades: nome e sobrenome, ao chamar o setState passando apenas o nome o sobrenome será o mesmo.

Essa seria a maneira mais simples, temos mais outras duas maneiras de chamar o setState além dessa.

Espero ter ajudado.