Na atividade 1 da aula 5 de React 2, quando eu chego na parte de implementar a função "like()", meu console retorna:
×
Unhandled Rejection (Error): Não foi possível realizar o like
(anonymous function)
src/componentes/Foto.js:18
15 | return response.json();
16 | } else{
17 |
> 18 | throw new Error("Não foi possível realizar o like");
| ^ 19 | }
20 | })
21 | .then(liker => {
POST https://instalura-api.herokuapp.com/api/fotos/3%7D/like?X-AUTH-TOKEN=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhbG90cyJ9.AQrl-JRJg39KeKYxMfNpnljXwxu0WOa8iYxT1Ih9Be-832MQBrJ5DxHwJzyQ-P-wp9lP49fSCmr_St-kl97nPw 400
Foto.js:18 Uncaught (in promise) Error: Não foi possível realizar o like
at Foto.js:18
Nesse mesmo momento o console do professor retorna um objeto com o responsável por realizar o like.
O meu arquivo Foto está assim:
import React, { Component } from 'react';
import {Link} from "react-router";
class FotoAtualizacoes extends Component {
like(event){
event.preventDefault();
fetch(`https://instalura-api.herokuapp.com/api/fotos/${this.props.foto.id}}/like?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`, {method: "POST"})
.then(response => {
if(response.ok){
return response.json();
} else{
throw new Error("Não foi possível realizar o like");
}
})
.then(liker => {
console.log(liker);
});
}
render(){
return (
<section className="fotoAtualizacoes">
<a onClick={this.like.bind(this)} 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-in fo">
<div className="foto-info-likes">
{
this.props.foto.likers.map(liker => {
return (<Link href={`/timeline/${liker.login}`} key={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.id}>
<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 foto={this.props.foto}/>
</div>
);
}
}
Não sei onde to errando, talvez esteja faltando alguma coisa no link do Heroku, porque aparentemente o resto do meu código está igual ao do professor no momento em que ele implementa a função "like".