0

Estoy tratando de retornar el valor de una promesa pero recibo el siguiente dato: Promesa {< pendiente >}.

Mi código es el siguiente:

**My Class -> Crud.js**

class Crud {  
   constructor(list, name, price) {
      this.list = list;
      this.name = name;
      this.price = price;
      this.getProducts = this.getProducts.bind(this);
      }

    async getProducts() {
      try {
         const response = await axios.get('http://localhost:4000/');
         const { data } = response;
         this.list = data;
         console.log('getProducts - list: ', this.list); 
         //output console: (1) [{…}]
                          //0: {Id_Product: 1, Name_Product: "Item1", Price_Product: 5}

         return (this.list); 
         } catch (error) {
             console.error(error);
         }
    }
  }//End Crud
export default Crud;

**File -> ProductList.js**
import Crud from '../Clases/Crud';

function productListScr (props)  {  
   let lista = [];
   let name = '';
   let price = '';
   let objLista = [];

   const crud = new Crud(lista, name, price);  

   **//sección <test intento 1>:**
     objLista  = crud.getProducts();
     console.log('objLista: ', objLista); 
     //Output console: Promise {<pending>}, [[PromiseState]]: "fulfilled" , [[PromiseResult]]: 
     // Array(1)
     ...
return (
    <ScrollView>
      {objLista.map(product => {
                return (
                    <ListItem>
                        <ListItem.Content>
                            <ListItem.Title>{product.Name_Product}</ListItem.Title>
                            <ListItem.Subtitle>{product.Price_Product}</ListItem.Subtitle>
                        </ListItem.Content>
                    </ListItem>
                      )
                 }) //End map
      }
    </ScrollView>
  ) //End return
};//End function 
export default productListScr;

Al revisar información de manejo de promesas, realice los siguientes cambios y pruebas sin éxito:

//sección <test intento 2>:

objLista  = await crud.getProducts();
console.log('objLista: ', objLista); //Unexpected reserved word 'await'

//sección <test intento 3>:

objLista = crud.getProducts().catch(error => {
                                    console.log('Error getProducts : ' + error.message) });                                       
console.log('objLista: ', objLista);
//Output console: Promise {<pending>},[[PromiseState]]:"fulfilled", [[PromiseResult]]:Array(1)

//sección <test intento 4>:

objLista = crud.getProducts().then((value) => {
                                            console.log(`Resuelve promesa: ${value}.`) });                                                 
console.log('objLista: ', objLista); 
//Output console: Promise {<pending>},[[PromiseState]]:"fulfilled", [[PromiseResult]]: undefined
                                           //Output console: Resuelve promesa: [object Object]

//sección <test intento 5>:

crud.getProducts().then((objLista) => {
                                     console.log('Resuelve promesa:' + objLista) });                                         
console.log('objLista: ', objLista);
//Output console: objLista: [] length: 0
                                    //Output console: Resuelve promesa :[object Object]

Mi objetivo es obtener la carga del arreglo objLista y presentar la lista en pantalla según retorno de la función productListScr().

1 respuesta 1

0

La razón del por que te aparece el mensaje Promise{} es por que al momento de llamar el método, aun no es resuelta dicha promesa, para eso el uso de await y ahí es donde viene el otro error. No puedes utilizar el await si tu método no esta definido como asíncrono.

Por lo que logro identificar del código estas utilizando react, me parece que no puedes definir la función que retorna un componente como un async.

Para mostrar correctamente los datos en pantalla y como en este caso no se tiene otro evento que realice la llamada de tu promesa, aremos uso de useEffect y useState para mostrar los elementos.

Definimos useEffect y useState

const [data, setData] = useState([]);
useEffect(() => {
    getData();
}, [])

creamos un método async

Aquí es donde le pasaremos los datos a data una ves se resuelva la promise.

const getData= async () => {
    const objLista = await crud.getProducts();
    setData(objLista);
}

Realizando uso de data para mostrar los elementos

Es importante que aquí no se olvide definir key en los elementos creados, esto se recomienda que sean valores unicos, como lo suelen ser los id como ejemplo coloque product.id

{data.map(product => {
    return (
        <ListItem>
            <ListItem.Content key={product.id} >
                <ListItem.Title>{product.Name_Product}</ListItem.Title>
                <ListItem.Subtitle>{product.Price_Product}</ListItem.Subtitle>
            </ListItem.Content>
        </ListItem>
    )
}) //End map
}
5
  • Muchas gracias por la respuesta Richard. Respondiendo a la consulta, efectivamente se trata de un código React con Javascript. Al intentar aplicar la solución utilizando sección de código compartido: crud.getProducts().map(product => { ** , tras ello presento el siguiente error: **Uncaught TypeError: crud.getProducts(...).map is not a function y creo que esto sucede pues al parecer el retorno de la función getProducts() no tiene elementos(valores) al mantenerse aun como promesa (Promise {<pending>}).
    – VH-Cyber
    Commented el 18 jun. 2021 a las 15:04
  • De manera similar se presenta el error aplicando la primera alternativa de solución, donde declara la función flecha: const getProducts = async () => { ... y se ejecuta aquella sobre {getProducts().map(product => { .... Será necesario recuperar/traspasar los valores del arreglo objLista obtenido en la función async a otro arreglo de trabajo y tulizar el mismo sobre la sentencia .map(product => {..?
    – VH-Cyber
    Commented el 18 jun. 2021 a las 15:22
  • @VH-Cyber actualice mi respuesta, puedes revisarla, por alguna razón entendí mal el como te llegan los datos, supuse que es un componente al que se le llama una ves resuelto los datos, pero es llamado y a su ves la promesa igual es llamada.
    – Richard
    Commented el 18 jun. 2021 a las 15:48
  • @VH-Cyber te ha servido la respuesta ?
    – Richard
    Commented el 18 jun. 2021 a las 16:40
  • Muchas gracias por la respuesta @Richard, eres un capo! tome el nuevo código con un pequeño cambio y funciono!. finalmente este fue el código incluido: const [data, setData] = useState([]); useEffect(() => { const getProducts = async () => { const objLista = await crud.getProducts(); setLista(objLista); } getProducts(); }, []);
    – VH-Cyber
    Commented el 19 jun. 2021 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.