1

Quando requisito algo do backend, o retorno vem como um array vazio.

Tentei tanto com map, quanto com console.log. Codigo fonte:

ReportScreen.js


const [reports, setReports ] = useState([]);

useEffect(() => {
    async function loadReports() {
        const response = await api.get('/reports');

        setReports(response.data);
        console.log(reports);
    }
    loadReports(); 
}, []); 

O backend esta enviando os dados com paginação para o banco (MongoDB), não sei se pode ser o problema, e se for não sei como resolver.

Retorno da requisição:

inserir a descrição da imagem aqui

Edit:

api.js

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://10.0.2.2:3001/api'
});

export default api;  

reportController.js

async list(req, res) {
    const reports = await Report.paginate({}, { page: 1, limit: 10});

    return res.json(reports);
}

Edit 2:

server.js

const express = require('express');
const mongoose = require('mongoose');
const requireDir = require('require-dir');
const cors = require('cors');

const app = express();
app.use(express.json());
app.use(cors());

mongoose.connect(
    'mongodb://localhost:27017/vendedorpositivo-backend', 
    { useUnifiedTopology: true, useNewUrlParser: true }
);

requireDir('./src/models');

app.use('/api', require("./src/Routes"));

app.listen(3001);


2 Respostas 2

1

Geralmente (não tenho total certeza se em todos os casos acontece isso) quando tentamos dar um console.log em um state que acabou de ser alterado, ele mostra o valor anterior.

No caso que citei no post, temos const [reports, setReports ] = useState([]); o que seta como valor inicial (e anterior na function loadReports()) como [ ], que é o que é mostrado no console. A melhor forma de testar nesse caso se algo está retornando, seria um console.log(response.data)

E nesse caso, ele ignoraria o formato do retorno para mostrar, o que pode ser o problema ao tentar utilizar map no retorno (que pode estar retornando como um JSON com array dentro, como {data: [ ]}). No caso da publicação, a melhor forma de checar mesmo seria com um console.log(response.data) ou checando o retorno da requisição na aba "Network" do console do navegador.

Para tirar a possibilidade de algum erro no código, tentaria envolver em um try catch, com o código a seguir, provavelmente eu teria tido sucesso e não teria perdido tempo ano passado.

const [reports, setReports ] = useState([]);

useEffect(() => {
    async function loadReports() {
        try {
            const response = await api.get('/reports');

            console.log(response.data);
        } catch (e) {
            console.log(e);
        }
    }
    loadReports(); 
}, []); 

0

Quando você faz essa requisição no Postman ou Insomnia a resposta vem vazia também? Mostra sua classe api, mas provavelmente é problema no seu backend.

5
  • Subi o código da api e o trecho do backend. No Insomnia o retorno da certo, retorna os dados. Commented 5/02/2020 às 19:50
  • Você está usando express pra fazer essa api? Mostra o arquivo principal o 'server.js' ou o 'app.js'
    – hnrqss
    Commented 5/02/2020 às 20:47
  • Coloquei na pergunta o server.js :) Commented 5/02/2020 às 21:35
  • hnrqss, tem alguma rede social que eu possa falar com vc? To com certa dificuldade em toda a integração de backend e frontend... Commented 5/02/2020 às 21:53
  • linkedin: linkedin.com/in/hnrqsss
    – hnrqss
    Commented 6/02/2020 às 12:19

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 .