Tengo el siguiente código dentro de un componente donde estoy usando un valor de cookie para decidir qué componente o bloque div mostrar.
Esto funciona eventualmente como se esperaba. Pero hay un momento en el que parece que el valor de la cookie aún no se ha verificado.
Durante este período, sigo ingresando primero el bloque else . Después de un par de segundos, ingreso el bloque if correctamente.
¿Pero por qué? Ese Cookies.get es una llamada asíncrona. Pero lo llamo dentro useEffect y uso await.
¿Podría saber cómo podría modificar esto para que, si la cookie existe, nunca ingrese el bloque else?
import React from 'react'; import Cookies from 'js-cookie'; const Sample = () => { const [cookie, setCookie] = React.useState(false); const hasCookie = async () => !!Cookies.get('my-cookie'); React.useEffect(() => { const myCookie = async () => await hasCookie(); myCookie().then((result) => setCookie(result)); }, []); const component = () => { if (cookie) { console.log(`YES there is a cookie: ${cookie}`); return <div> Yup the cookie exists </div>; } else { console.log(`NO no cookie: ${cookie}`); return <div> Nope no cookie </div>; } }; return component(); }; export default Sample;Como referencia, el siguiente es el registro de la consola donde se imprime falso durante un tiempo antes de convertirse en verdadero.
Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:20 NO no cookie: false Sample.jsx:15 YES there is a cookie: true Sample.jsx:15 YES there is a cookie: true Sample.jsx:15 YES there is a cookie: true ....Bueno antes que nada hay algo que puede ser un problema futuro:
Debido a que Cookies.get('my-cookie') devuelve una Promesa, es un objeto. Usando !! en los objetos siempre devuelve verdadero (los objetos son verdaderos).
Entonces, ¿ hasCookie siempre debe devolver verdadero?
Para que pruebe correctamente si existe, debe await la Promesa hasta que se resuelva, luego use !! sobre el valor resuelto:
!!(await Cookies.get('my-cookie'));Para responder a su pregunta, la forma más común es un estado que rastrea si algo se está cargando:
const [loading, setLoading] = useState(true);Cuando se está cargando, devuelves algo más:
if (loading) return null; // if you don't want to render anythingDe lo contrario, puede continuar con normalidad.
Cuando configure la cookie, también asegúrese de configurar la carga en falso:
setCookie(result); setLoading(false);