Javascript React: JavaScript e Mongodb

[Joanderson Pereira]

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

backend.rar frontend.rar

[Joanderson Pereira]

O problema era um typo.

O React possui um método chamado componentDidMount que é acessível para componentes escritos em formato de classe. Ele é invocado imediatamente após um componente ser montado (inserido na árvore). Inicializações que exijam nós do DOM devem vir aqui. Se precisar carregar data de um endpoint remoto, este é um bom lugar para instanciar sua requisição.

Percebi que componetDidMount (conforme digitei) é um componente inexistente do react, ou seja, ele não estava realizando nada. Não havia um erro sintaxe, eu criei um método que não fazia nada, não era uma referência ao método do React. O console.log(response.data) não exibia nenhuma informação.

O correto é componentDidMount, agora a página exibe as informações que eu quero diretamente do MongoDB, e no console.log aparece o array nos conformes.

async componentDidMount() {
      const response = await api.get('posts');
      this.setState({ feed: response.data });  
      console.log(response.data);
  }

O problema era apenas um typo que não me permitia usar o recurso do React. Sou iniciante em programação web e não sabia como depurar o código, algo realmente simples.

No console: Array(8) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ].