0

estoy intentando hacer una pwa con typescript, ionic, react y firebase (por puro aburrimiento), y estoy intentando imprimir el nombre de un usuario (que está en la base de datos), el nombre es asíncrono, en mi caso tarda 3s en imprimir el nombre en consola, pero no lo imprime en la pagina y tira este error "Warning: Functions are not valid as a React child". Lo que intento hacer es que en un archivo donde estan todas las funciones relacionadas a la interacción con la base de datos hay una función que retorna el nombre del usuario.

(./firebaseConfig.ts)

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

a esta función la importo desde otro archivo de react. Cuando la llamo (de esta forma)

(./pages/Index.tsx)

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

export const Index: React.FC = () => {
const [username, setUsername] = useState("");

  useEffect(() => {
    getUsername().then(username => setUsername(username))
  }, []);
return(
    <h3>Welcome {getUsername} </h3>
)
}

Antes de que cargue me lanza el error, luego de 3s de que cargo la pagina se imprime en consola el nombre

Que debería hacer?

Muchas gracias.

6
  • Mostranos el componente donde estás mostrando el usuario (donde se llama a getUsername)
    – Juan Marco
    Commented el 12 jun. 2020 a las 15:47
  • por que tu funcion es async si no utilizas await dentro de ella? Tambien como es una funcion tienes que ejecutar dicha function con los parentesis. {getUsername()}
    – Isaac
    Commented el 12 jun. 2020 a las 17:53
  • es <h3>Welcome {username} </h3> no {getUsername}
    – hawks
    Commented el 14 jun. 2020 a las 1:42
  • Si, me olvide de cambiarlo aca, pero en el codigo esta con username, decidi ponerle a la funcion getUsername() un setTimeout para que espere 2s y que tenga el valor, eso funciona pero me tira esto Argument of type 'void' is not assignable to parameter of type 'SetStateAction<string>'. TS2345 Commented el 14 jun. 2020 a las 7:12
  • pues nose seguro que cuando llamas getUsername() sessionName.name tiene valor?
    – hawks
    Commented el 14 jun. 2020 a las 13:48

1 respuesta 1

0

Primero de todo es que no estas llamando a la función te faltan los parentesis getUsername().

Aunque resuelvas esto React te va a lanzar un error diciendo que no se pueden usar objetos como hijos.

No sé que versión estas usando, pero para hacer peticiones asíncronas tienes que hacerlo cuando se ha montado el componente en el DOM.

Con hooks sería con useEffect y sin hooks componentDidMount().

Aquí te dejo un ejemplo de como sería con hooks.

<div id="root"></div>
// Imagina que haces una petición a tu server para traerte los datos del user
async function getUsername() {
  return 'Usuario AA';
}

function App() {
  // creas un estado para guardar el usuario, en el primero render será vacío
  const [username, setUsername] = useState('');
  
  // Cuando react haya montado el componente se hará la petición al server
  // y se setea el username con setUsername(respuesta)
  // cuando haces setUsername react se da cuenta que tiene que actualizar la vista porque el estado ha cambiado
  // por lo tanto, re-renderiza el componente con los nuevos datos
  // Pero esta vez no ejecutará la llamada al server
  
  useEffect(() => {
      getUsername().then(username => setUsername(username))
  }, []); // [] -> siginifica solo ejecuta esta función al montar
  
  return <h3>Welcome {username}</h3>
}

// se monta el component app en el elemento root que esta definido en el html
ReactDOM.render(<App/>, document.getElementById('root'));

Para más info te dejo la documentación de los hooks

5
  • Hola, gracias por tu respuesta. El error dejo de aparecer, pero sigue sin mostrar el valor, ¿Por que puede ser?. Al parecer no ejecuta la función ya que al ejecutarse tendría que imprimir en consola el valor pero no imprime nada Commented el 14 jun. 2020 a las 0:34
  • puedes poner como lo estas implementando? has importado useEffect y useState. import React, { useEffect, useState } from 'react';
    – hawks
    Commented el 14 jun. 2020 a las 0:36
  • Tengo un archivo donde se exporta una funcion que retorna un valor, importo la funcion getUsername en una pagina de react, tarda mas o menos 2s en responder, hice eso de el useState y el useEffect, cuando retorna la funcion getElement, retorna un string y me imprime undefined en la pagina, en la consola no imprime nada, a username lo llamo asi <h3>Welcome {username} </h3> me parece que la funcion no la ejecuta porque no imprime nada en consola, pero el valor existe si lo imprimo desde otra funcion Commented el 14 jun. 2020 a las 0:57
  • si quieres actualiza tu pregunta con lo que tienes ahora y intento ayudarte. Sin ver el codigo es dificil.
    – hawks
    Commented el 14 jun. 2020 a las 1:08
  • ahi la actualize, desde ya muchas gracias por tu tiempo!! Commented el 14 jun. 2020 a las 1:40

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.