Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

TypeError: Cannot read property 'bind' of undefined ao implementar o comentário

O problema que dá é nesse código.

 {this.state.fotos.map(foto => <FotoItem key={foto.id} foto={foto} like={this.like.bind(this)} comenta={this.comenta.bind(this)}/>)}  

Mas quando do um console nesse aqui ele está caindo no else e exibindo "Minha action: @@redux/INIT".

export function timeline(state=[], action){
  if(action.type === 'LISTAGEM'){
    return action.fotos;
  }

  if(action.type === 'COMENTARIO'){
    const fotoId = action.fotoId;
    const novoComentario = action.novoComentario;
    const fotoAchada = this.fotos.find(foto => foto.id === fotoId);
    fotoAchada.comentarios.push(novoComentario);
    console.log("Ver o state: " + state);
    return state;
  } else {
    console.log("Minha action: " + action.type);
  }
  return state;
}
3 respostas

Boa tarde, Kesselyn! Como vai?

Como o log do erro está informando, não é possível invocar o bind() pois o this.like está indefinido. Ou seja, provavelmente não há um método like() no contexto do this. Essa linha de código onde vc disse que o erro está ocorrendo está em qual arquivo? Vc poderia colar aqui o conteúdo completo desse arquivo, por favor?

Qualquer coisa é só falar!

Grande abraço e bons estudos, minha aluna!

É no componente Timeline

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

export default class Timeline extends Component {

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

  componentWillMount(){
    this.props.store.subscribe(() => {
      this.setState({fotos: this.props.store.getState()});
    })
  }

  componentDidMount() {
    this.carregaFotos();
  }

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

  carregaFotos() {
    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.store.dispatch(TimelineApi.lista(urlPerfil));
  }

  like(fotoId) {
    this.props.store.like(fotoId);
  }

  static comenta(fotoId, textoComentario) {
    this.props.store.dispatch(TimelineApi.comenta(fotoId, textoComentario));
  }

  render() {
    return(
      <div className="fotos container">
        {this.state.fotos.map(foto => <FotoItem key={foto.id} foto={foto} like={this.like.bind(this)} comenta={this.comenta.bind(this)}/>)}  
      </div>
    );
  }
}
solução!

O código tinha dois problemas, na função timeline, eu estava passando this.fotos ao invés de state para a const fotoAchadae também estava colocando o static no método comenta na classe Timeline ao invés da classe TimelineApi.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software