Extraigo datos de Firebase en getSubscriptions() que devuelve una matriz:
[ { "price": 2000.01, "product_name": "Awesome product" }, { "active": true, "product_name": "Other product", "Price": 599.99 } ]Estoy iterando a través de la matriz y puedo obtener un resultado, pero tengo problemas para obtener ese resultado.
Sé que el problema tiene algo que ver con la sincronización y la espera de que regrese el resultado, pero no sé cómo aplicar esos conceptos a mi problema aquí.
Cuando elimino el comentario de la línea useEffect(() => setActiveNotifications(active), [active]) , introduciendo useState, las llamadas se colocan en un bucle infinito llamando a la API de Firebase hasta el infinito.
export default function UserAccount(props) { const [activeNotifications, setActiveNotifications] = useState() function buildSubscriptions(userId) { getSubscriptions(userId).then(active => { console.log(JSON.stringify(active, null, 4)) // This returns output above // useEffect(() => setActiveNotifications(active), [active]) // This will cause infinite loop return ( active.map(product => <p key={product.product_name}>{product.product_name}</p>) // key defined some value to not throw warning ) }) } async function getSubscriptions(userId) { const subPtrCollection = await getUserSubs(userId) let a = [] await Promise.all(subPtrCollection.map(async docId => { // Promise.all used to execute commands in series const docData = await getDocData(docId.product) a.push(docData) })) return a } return ( ... <Box>{buildSubscriptions(user.uid)}</Box> // Not important where `user.uid` comes from ... ) }El bucle infinito se debe a que el método invocado en el método de representación establece el estado y eso provoca la representación. Pruebe algo como a continuación 1) En el cambio de uid, solicite la compilación 2) cuando reciba los resultados de api save to state, esto causa el procesamiento 3) en el método de procesamiento utilizó los datos de estado.
export default function UserAccount(props) { const [activeNotifications, setActiveNotifications] = useState(); // when ever uid changes, do the build subscriptions useEffect(() => buildSubscriptions(user.uid), [user.uid]); // get subscriptions and save to state function buildSubscriptions(userId) { getSubscriptions(userId).then((active) => setActiveNotifications(active)); } async function getSubscriptions(userId) { const subPtrCollection = await getUserSubs(userId); let a = []; await Promise.all( subPtrCollection.map(async (docId) => { // Promise.all used to execute commands in series const docData = await getDocData(docId.product); a.push(docData); }) ); return a; } return ( <Box> {activeNotifications.map((product) => ( <p key={product.product_name}>{product.product_name}</p> ))} </Box> ); }