0

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);
  }

4
  • A descrição é muito vaga. Já tentou rastrear onde esse problema se inicia? Verificou se você está recebendo dados do servidor? Se no componetDidMount você fizer um console.log(response.data), o que o console imprime?
    – Andre
    22/07/2019 às 21:26
  • testei conforme acima, não obtive alertas de erros o que eu acho que é um bom sinal 24/07/2019 às 2:46
  • Mas o que aparece no console.log? Aparece o array populado como deveria ser? Aparece um array vazio? Aparece undefined?
    – Andre
    24/07/2019 às 2:51
  • Era esse o problema, literalmente não estava aparecendo nada no console. Percebi que componetDidMount é um componente inexistente do react, ou seja, ele não estava realizando nada. O correto é componentDidMount, agora a página exibe as informações que eu quero e no console.log aparece o array populado. O problema era apenas um typo que não me permitia usar o recurso do React. Perdi duas semanas por causa de um "n" antes do "t". 24/07/2019 às 10:56

1 Resposta 1

0

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) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ].

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .