0

estoy haciendo una aplicación con Typescript, Ionic, React y Firebase por puro aburrimiento. Lo que quiero lograr es que una página de React no renderize hasta que una variable tenga un valor, el problema es el siguiente. Hay un archivo en la Raíz de la carpeta src llamado "fireConfig.ts" que contiene todas las funciones de login, register, etc. Una de las funciones que contiene el archivo es "getUsername()" la cual retorna un string con el nombre de un usuario guardado en Firebase Firestore, lo que pasa es que React llama a la función y retorna "undefined" porque la variable donde se almacena el string no obtuvo ningún valor, pero al rato imprime en consola el valor que necesito, ¿Como puedo hacer que la función espere al valor para que retorne y como hago que React se actualice al recibir el valor?

Aca les dejo el codigo:

// ./fireConfig.ts
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    setupUI(user);
  } else {
    toast("Something gone wrong", 2000, "danger");
  }
});

const setupUI = (user: any) => {
  let users = db.collection('users').doc(user.uid)
  users.get().then(doc => {
    if (!doc.exists){
      toast("Something gone wrongg", 2000, "danger");
    } else {
      sessionName = doc.data()
      sessionName = sessionName.name;
    }
  })
}


export async function getUsername() {
  console.log(sessionName)
  return `${sessionName}` 
}

// ./pages/Page.tsx

import React, { useState, useEffect } from "react";
import { getUsername } from "../firebaseConfig";

export const Page: React.FC = () => {

    const [username, setUsername] = useState('');

    useEffect(() => {
    try{
      getUsername().then(username => setUsername(username))
    } catch (e) {
      console.error(e)
    }
  }, [])

  return(
      <h3>Welcome {username}</h3>
  )
}

Desde ya agradezco todo tipo de ayuda que me puedan dar!

1 respuesta 1

0

En este caso necesitas hacer un renderizado condicional, es decir, usar alguna condición para hacer render del componente hasta que tenga el valor que necesites, por ejemplo:

if (username) {
  return <h3>Welcome {username}</h3>;
}
  return <h3>Loading...</h3>;

o

  return username && <h3>Welcome {username}</h3>;

En el primer caso se puede hacer uso de algún componente de loading mientras el valor no esté disponible. En el segundo caso mientras el valor no exista se retorna null.

Fuente: https://es.reactjs.org/docs/conditional-rendering.html

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.