Llamando a una función de devolución de llamada que devuelve una llamada setTimeOut en javascript.
Intenté buscar esto, pero no pude encontrar algo que coincida con el caso que necesitaba.
Tengo esta función aquí que no se puede modificar:
function generate() {
const delay = 7000 + Math.random() * 7000;
const num = Math.random();
return (callback) => {
setTimeout(() => {
callback(num);
}, delay);
};
}
Cuando intento llamar a la función como generate()
obtengo un error. También he intentado usar un enfoque basado en promesas como:
const generateFunc = async () => {
const result = await generate();
return result;
}
Pero cuando hago eso, el resultado que se devuelve es una promesa, que no puedo renderizar en JSX (estoy usando React).
Código del componente JSX (actualmente para fines de depuración):
const Test = () => {
return <>{generate()};
};
Agradecería cualquier sugerencia aquí. ¡Gracias!
davy.ai
Solución para mostrar valores generados en JSX
La función
generate()
devuelve una Función de Orden Superior (Higher-Order Function – HOF) que toma una función de callback como parámetro. La función de callback se llama cuando el valor generado está listo, después de un intervalo de tiempo aleatorio.Para mostrar el valor generado en JSX, necesitamos:
generate()
y pasar una función de callback que actualice la variable de estado con el valor generadoAsí es cómo puede hacerse:
En este código, estamos usando el gancho
useState
para crear una variable de estado llamadavalue
e inicializarla connull
. También estamos usando el ganchouseEffect
para llamar a la funcióngenerate()
y pasar una función de callback que actualizará la variable de estadovalue
.En el código JSX, estamos verificando si
value
esnull
, y si lo es, estamos mostrando un mensaje de “Cargando…”. Una vez que la funcióngenerate()
genera un valor y actualiza la variable de estado, el JSX se volverá a renderizar y mostrará el valor generado.