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 de useEffect obtener datos de api y establecer la variable useState . Y luego voy a usar esa variable useState de todos modos. 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, veo que la variable useState finalmente tiene los datos.
Necesito obtener los datos antes del proceso de renderizado del sitio web. Necesito tener los datos cuando se carga la página. De lo contrario, estoy recibiendo errores.
Actualización: Gracias a todos los que respondieron a la pregunta. Todo el mundo dice "usa un cargador", pero yo ya lo estoy usando. Pero el principal problema no es este.
Hay muchas funciones y variables useState. Y necesito los datos de inmediato para hacer que otras funciones y variables useState sean utilizables.
Ya estoy usando el efecto de carga, pero el problema principal es que las funciones necesitan variables de palabras que funcionen para hacer que los datos sean utilizables y para presentarlos al usuario.
Necesito esos datos después de usar la función setWords(data) que está en la función getAllData().
Necesito datos antes de todo.
En lugar de crear una función asíncrona dentro del enlace funcional, puede crear una función dentro de useEffect que se llama en el montaje del componente y muestra una rueda de carga cuando se recuperan los datos. Este es mi enfoque para la declaración del problema anterior
const LoadingDiv = styled.div` display: flex; justify-content: center; align-items: center; ` const [words, setWords] = useState() useEffect(() => { const getAllData = async() => { let url = `http://127.0.0.1:3000/api/improve-language`; let response = await fetch(url) let data = await response.json() setWords(data) }; getAllData(); }, []) return ( words ? <YourComponents.../> : <LoadingDiv > Loading... < /LoadingDiv> );En primer lugar, está utilizando más await de lo que se necesita. Dicho esto, puede usar algún componente de carga mientras obtiene los datos (es la forma recomendada), así:
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() setWords(data) } if(!words){ return <p>Loadin ...</p> }Creo que la forma más fácil es mostrar una rueda de carga hasta que tenga datos en words . De esa manera, la página se cargará, su rueda giratoria se mostrará hasta que haya datos, luego, cuando haya datos, puede quitar la rueda giratoria y mostrar su contenido.