Hola, tengo un pequeño problema cuando intento asignar el valor devuelto de la función a una variable. Probé este código con un archivo console.log y muestra el resultado correcto, pero cuando quiero asignar este resultado a una variable, da un valor indefinido. Así que aquí está el código y puedes explicarme qué estoy haciendo mal porque soy un novato en javascript.
const onDataChange = (items) => { let products = []; let images = listFromStorage(); //a function call that displays undefined value but should return array console.log(images); items.forEach((item) => { let key = item.key; let data = item.val(); products.push({ key : key, title : data.title, before : data.before, after : data.after }) }) setProductList(...productList, products); } const listFromStorage = () => { let storageRef = firebaseService.getStorage().ref().child('/posts/products'); let images = []; storageRef.listAll().then(function (res) { res.items.forEach((imageRef) => { imageRef.getDownloadURL().then((url) => { images.push({ url : url }); }); }); return images; }) .catch(function (error) { console.log(error); });}
No solo debe esperar a que finalice el código asincrónico, sino que también debe devolver un valor de listFromStorage para asignar.
const onDataChange = async (items) => { // <-- declare async const products = []; const images = await listFromStorage(); // <-- await result console.log(images); items.forEach((item) => { const key = item.key; const data = item.val(); products.push({ key: key, title: data.title, before: data.before, after: data.after }) }) setProductList(...productList, products); } const listFromStorage = () => { const storageRef = firebaseService .getStorage() .ref() .child('/posts/products'); const images = []; return storageRef // <-- return Promise chain .listAll() .then(function (res) { res.items.forEach((imageRef) => { imageRef.getDownloadURL().then((url) => { images.push({ url }); }); }); return images; }) .catch(function (error) { console.log(error); }); }