Estoy usando una función para obtener algunos datos y mostrar los datos devueltos. El problema: los datos no se muestran.
function Profile() { const profileUser = getData(userId) return ( <div> <p>{profileUser?.name}</p> </div> ) } getData es una función asíncrona que devuelve la obtención de datos de firebase mientras usa await y devuelve un objeto.
Probablemente querrá almacenar profileUser en el estado y luego usar useEffect para obtener esos datos cuando el componente se monte.
function Profile() { const [profileUser, setProfileUser] = useState(); useEffect(async () => { const user = await getData(userId); setProfileUser(user); }, []); return ( <div> <p>{profileUser?.name}</p> </div> ) }La respuesta de larz es buena, pero es posible que reciba una advertencia/error acerca de que useEffect es asíncrono. Se supone que no debe tener un método useEffect asíncrono. Sin embargo, hay una solución.
Debe definir una función asíncrona dentro del gancho useEffect que llama a su función asíncrona. Luego use esos datos para establecer el estado. Necesitas el estado ya que eso es lo que lo hace reactivo.
function Profile() { const [profileUser, setProfileUser] = useState({}); useEffect(() => { const fetchUserProfile = async () => { const user = await getData() setProfileUser(user); } fetchUserProfile() }, []); return ( <div> <p>{profileUser?.name}</p> </div> ) }Es importante destacar que no espere su llamada fetchUserProfile, ya que nuevamente, el método useEffect no es asíncrono.