Estou seguindo um tutorial de como fazer um instagram, já foi feito e testado o backend e o frontend separadamente. No backend consigo alterar as rotas e enviar/salvar informações para o MongoDb, no frontend consigo exibir as informações da maneira que quero. O problema está quando eu vou puxar do banco de dados, fiz um esquema para que ele percorra todos os posts do database exibindo suas informações, só que aparentemente ele não está percorrendo nenhuma posição. Não creio que o problema seja o mongodb pois consigo conectar e upar arquivos (mas não pegá-los?).
Estou certo que o código está como no vídeo.
import React, {Component} from 'react';
import api from '../services/api';
import './Feed.css';
import more from '../assets/more.png';
import tolike from '../assets/tolike.png';
import nolike from '../assets/nolike.png';
import comment from '../assets/comment.png';
import send from '../assets/send.png';
class Feed extends Component{
state = {
feed: [],
};
async componetDidMount() {
const response = await api.get('posts');
this.setState({ feed: response.data });
}
render() {
return(
<section id="post-list">
{ this.state.feed.map(post => (
<article>
<header>
<div className="user-info">
<span>{post.author}</span>
<span className="place"> {post.place}</span>
</div>
<img src={more} alt= "Mais"/>
</header>
<img src= {`http://localhost:3333/files/${post.image}`} alt= "post"/>
<footer>
<div className= "actions">
<img src = {nolike} alt=""/>
<img src = {comment} alt=""/>
<img src = {send} alt=""/>
</div>
<strong>{post.likes}</strong>
<p>
{post.description}
<span> {post.hashtag}</span>
</p>
</footer>
</article>
))}
</section >
);
}
}
export default Feed;
Deixarei o projeto como anexo, tenho certeza que para quem entende é algo fácil de resolver. Meus estudos com programação web estão travados por causa disso FirefoxSend baixar backend.rar e frontend.rar
Seguindo recomendações eu usei o console.log(response.data) porém não obtive alertas de erro nem no console do navegador nem no vs code.
async componetDidMount() {
const response = await api.get('posts');
this.setState({ feed: response.data });
console.log(response.data);
}
componetDidMount
você fizer umconsole.log(response.data)
, o que o console imprime?console.log
? Aparece o array populado como deveria ser? Aparece um array vazio? Apareceundefined
?