Así que actualmente estoy repasando mis habilidades de reacción y aprendiendo firebase. Lo encontré bastante simple de configurar y ahora he estado realizando con éxito solicitudes de búsqueda desde mi base de datos en tiempo real.

Actualmente estoy creando una especie de aplicación de cumpleaños que mostraría a los celebrantes mensuales y diarios, y he generado datos simulados que importé a mi base de datos. Actualmente, los nombres se obtienen con éxito y se muestran en la pantalla, sin embargo, las imágenes (que están alojadas en otro sitio y se obtienen como una cadena de la base de datos) no se cargan correctamente y recibo un error 500 en mi consola. Sin embargo, si sigo actualizando, eventualmente se cargan.

Estoy pensando que debe ser con la forma en que hago mi solicitud de búsqueda. Básicamente busco a todos los usuarios y luego hago un filtro (todavía no he explorado la búsqueda con consultas), así que pensé que funcionaría.

Este es el código para las solicitudes de recuperación.

 export const getUsers = () => { const usersDb = ref(database); return get(child(usersDb, `/users`)).then((snapshot) => { return snapshot.val(); }); }; export const getMonthlyCelebrants = async () => { const users = await getUsers(); const monthlyCelebs = []; for (let user in users) { const userMonth = +users[user]["birth_date"].split("/")[1]; userMonth === getMonthNum() && monthlyCelebs.push(users[user]); } return monthlyCelebs; };

Y este es el componente Monthly Celebrants en el que los uso:

 export default function Monthly() { const [monthlyCelebs, setMonthlyCelebs] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { async function loadPage() { setIsLoading(true); const users = await getMonthlyCelebrants(); setIsLoading(false); setMonthlyCelebs(users); } loadPage(); }, []); return ( <div> <h2>{getMonthAndYear()} Celebrants</h2> {isLoading ? ( <p>Celebrants loading...</p> ) : ( sortBirthdays(monthlyCelebs).map((monthlyCeleb) => { return ( <SingleMonthlyCelebrant monthlyCeleb={monthlyCeleb} key={`${monthlyCeleb.birth_date}${monthlyCeleb.first_name}`} /> ); }) )} </div> ); }

Cualquier sugerencia o consejo sería muy apreciado. ¡Gracias!