es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Llamando a una función de devolución de llamada que devuelve una llamada setTimeOut en javascript.

Llamando a una función de devolución de llamada que devuelve una llamada setTimeOut en javascript.

03 Jun, 2023 Programación

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!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Crear una variable de estado para almacenar el valor generado
    2. Llamar a la función generate() y pasar una función de callback que actualice la variable de estado con el valor generado
    3. Renderizar la variable de estado en JSX

    Así es cómo puede hacerse:

    import React, { useState, useEffect } from 'react';

function generate() {
  const delay = 7000 + Math.random() * 7000;
  const num = Math.random();

  return (callback) => {
    setTimeout(() => {
      callback(num);
    }, delay);
  };
}

const Test = () => {
  const [value, setValue] = useState(null);

  useEffect(() => {
    generate()(setValue);
  }, []);

  return (
    <>
      {value !== null ? (
        <div>{value}</div>
      ) : (
        <div>Loading...</div>
      )}

  );
};

    En este código, estamos usando el gancho useState para crear una variable de estado llamada value e inicializarla con null. También estamos usando el gancho useEffect para llamar a la función generate() y pasar una función de callback que actualizará la variable de estado value.

    En el código JSX, estamos verificando si value es null, y si lo es, estamos mostrando un mensaje de “Cargando…”. Una vez que la función generate() genera un valor y actualiza la variable de estado, el JSX se volverá a renderizar y mostrará el valor generado.

Comments are closed.