Response.data returns empty array (React Nativ(HOOKS))

Question

When you require something from the backend, the return comes as an empty array.

I tried both with map and with console log.. Source code:

Reportscreen.js

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

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

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

The backend is sending the data with paging for the bank (Mongodb), I do not know if it can be the problem, and if it is not know how to solve.

Return of the requisition:

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

Answer 1

Usually (I’m not entirely sure if in all cases this happens) when we try to give a console.log in a state that has just been changed, it shows the previous value.

In the case I mentioned in the post, we have const [reports, setReports ] = useState([]); what arrow as initial value (and previous in function loadReports()) as [ ], which is what is shown on the console. The best way to test in this case if something is returning, would be a console.log(response.data)

And in this case, it would ignore the format of the return to show, which may be the problem when trying to use map return (which may be returning as a JSON with array inside, such as {data: [ ]}). In the case of publication, the best way to check even would be with a console.log(response.data) or checking the return of the request in the "Network" tab of the browser console.

To take away the possibility of some error in the code, I would try to involve in a Try catch, with the following code, I probably would have had success and would not have lost time last year.

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(); 
}, []); 

Answer 2

When you make this request in Postman or Insomnia the answer comes empty too? Shows your class api, but is probably problem in your backend.