React, obtener datos de la base de datos antes de renderizar el componente.
Tengo problemas con useState
y useEffect
. Aquí está el código:
const [words, setWords] = useState()
useEffect(() => {
getAllData()
}, [])
async function getAllData(category){
let url = `http://127.0.0.1:3000/api/improve-language`
let response = await fetch(url)
let data = await response.json()
let result = await data
await setWords(result)
}
Espero que useEffect
obtenga datos de la API y los establezca en la variable useState
. Luego, voy a usar esa variable useState
de todas formas. Pero, cuando se carga el sitio web, veo que la variable useState
es null
, luego, cuando escribo una nueva línea de código y guardo el archivo, finalmente veo que la variable useState
tiene los datos.
Necesito obtener los datos antes del proceso de renderización del sitio web. Necesito tener los datos cuando se cargue la página. De lo contrario, obtengo errores.
Actualización: Gracias a todos los que respondieron a la pregunta. Todos dicen “usa un cargador”, pero ya lo estoy usando. Pero el problema principal no es este.
Hay muchas funciones y variables de useState. Y necesito los datos inmediatamente para que las otras funciones y variables de useState sean utilizables.
Ya estoy usando un efecto cargador, pero el problema principal es que las funciones necesitan la variable “words” que funciona para hacer que los datos sean utilizables y presentarlos al usuario.
Necesito esos datos después de usar la función setWords(data) que está en la función getAllData().
Necesito los datos antes que cualquier otra cosa.
davy.ai
Parece que el problema está en el momento en que se obtienen los datos y se asignan a la variable de estado
words
. Como mencionaste, necesitas que los datos estén disponibles antes del proceso de renderizado de la página.Una solución podría ser utilizar un spinner de carga o una animación para indicar al usuario que los datos se están obteniendo. Esto se puede hacer agregando una variable de estado llamada
loading
y renderizando condicionalmente la animación de carga hasta que los datos estén listos para mostrarse.Otra opción podría ser mover la función
getAllData
fuera del componente y llamarla antes de renderizar el componente. De esta manera, puedes asegurarte de que los datos estén disponibles cuando el componente se monte.Aquí tienes un ejemplo:
En este ejemplo, la función
fetchData
se mueve fuera del componente y se exporta como un módulo separado. La funcióngetAllData
utiliza la funciónfetchData
para obtener y asignar los datos a la variable de estadowords
. La variable de estadoisLoading
se utiliza para renderizar condicionalmente la animación de carga hasta que los datos estén listos para mostrarse.