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.

El evento “onClick” se está activando varias veces en la referencia de React.

04 Aug, 2023 Programación

Tengo una funcionalidad de descarga donde estoy descargando

const csvLink = createRef();

const dropdown = (
  <div onclick="{refetch}">
    {safeLabel(messages.csv)}
    <icon name="pull"></icon>
    {isSuccess ? <csvlink ref="{csvLink}" data="{data?.data}"></csvlink> : null}
  </div>
);

const onsuccess = (response) => {
  csvLink?.current?.link?.click();
};

const { refetch, data, isSuccess } = useQuery(
  "apicall",
  () => fetchData(headers),
  {
    enabled: false,
    onSuccess: onsuccess
  }
);

Entonces, cuando hago clic en el ícono “pull”, se realiza una llamada a la consulta y me envía una respuesta que estoy pasando al csvLink e intentando descargar el archivo CSV. Ahora, debido a que se llama a csvLink?.current?.link?.click(); en el onsuccess de la consulta, el refetch se llama en un bucle infinito. ¿Dónde debo llamar a este click y cómo puedo solucionar este problema?

Gracias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema radica en que csvLink?.current?.link?.click(); se llama en la función onsuccess, que se activa cada vez que la consulta tiene éxito, incluyendo después de que se haya descargado el CSV. Aquí te mostramos cómo solucionar el problema:

    1. Elimina la referencia csvLink del JSX del menú desplegable:
    {isSuccess ? <csvlink data="{data?.data}">Descargar CSV</csvlink> : null}
    1. Mueve csvLink?.current?.link?.click(); dentro de un hook useEffect que se ejecute solo cuando isSuccess cambie a true:
    // después del hook useQuery
useEffect(() => {
  if (isSuccess) {
    csvLink.current.link.click();
  }
}, [isSuccess]);

    De esta manera, el CSV se descargará solo una vez cuando la bandera isSuccess se convierta en true, y ya no se llamará a refetch en un bucle infinito.

Comments are closed.