Problems when trying to return the api data be in a class

Question

I built an api that returns the units I have registered in a DB but when trying to return these not passing

import React, { Component } from 'react';
import axios from 'axios';

const api = {

  let: units = [],

  units: () => {
    axios.get('http://192.168.0.23/apiTeste/public/api/unidades')
    .then(response => {
      console.log(response);
        return response.data.data
    }).catch((error) => { 
      console.log(error.message)
    });
    return 'Falha ao tentar retornar as unidades'
  },

};

export default api;

The report presents the data correctly, the response.data.data if I use in a file with a class I can define a state units = [] and with a setState return the units

However I would like to create this file for the returns of the api, but as I do not use a class so I understand I can not use state.

Have some way without the class return this data, or save in a variable or something like that?

Or else use the setState right here without a class?

Or last case build a class to be returned in another class that will call the function? Ex:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

import api from './units';

export default class App extends Component { 
  render() {
    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Units: {api.units()}</Text>
      </View>
    );
  }
}

I believe these would be the ways to solve my problem, but if someone knows otherwise than to put the call from the api in the same file as the final class it might be too.

Answer 1

What you can do is use one Promise(), so Voce gets to know when you finish the request and changes your state wherever you are.

import React, { Component } from 'react';
import axios from 'axios';

const api = {

let: units = [],

units: New Promisse((resolve, reject)=>{
    axios.get('http://192.168.0.23/apiTeste/public/api/unidades')
    .then(response => {
    console.log(response);
        resolve(response.data.data)
    }).catch((error) => { 
    console.log(error.message)
    reject(error)
    });
});
};
export default api;

any component for example in the App Voce api.units and update your state of Acardo.

api.units.then((result)=>{
    //result vai ser o "response.data.data" que passou para o resolve la em units
    //aqui voce pode usar o setState do component a vontade
}).catch((error)=>{
    //aqui a mesma coisa,o mesmo erro que pega no catch em units
})