Estoy trabajando con el componente funcional de reacción.
Tengo la funcionalidad de descarga (asincrónica) en mi aplicación. Hay una lista de botones de descarga en mi aplicación. Quiero descargarlos uno por uno en la cola.
const [downloadQueue, setDownloadQueue] = useState([]);
onClickDonwload = () => { //on every download click this function calls. So user can click on download continuously but I want to make sure them to be downloaded one by one.
downloadQueue([...downloadQueue, { id, data }])
}
useEffect(() => {
downloadQueue.map(async(data) => {
await myDownloadAsyncFunction()
})
}, [downloadQueue]) // here the issue is whenever the downloadQueue updates it just start downloading without waiting for the previous one
Por favor ayuda
¿Qué tal esto? Utiliza Promise-chaining para hacer una cola simple
import React, { useState } from "react";
// Any async function or function that returns a promise
async function myDownloadAsyncFunction(data) {
return fetch('https://mydomain.test/path');
}
function DownloadButton() {
const [queue, setQueue] = useState(Promise.resolve());
onClickDownload = () => {
setQueue(queue
.then(() => myDownloadAsyncFunction('My data'))
.catch((err) => {console.error(err)})
)
}
return (
<button onClick={onClickDownload}>Download</button>
);
}
Lo anterior no activa la descarga desde useEffect . Si desea usar useEffect , creo que el estado probablemente deba ser un contador para hacer que useEffect se ejecute cuando cambie:
import React, { useState, useEffect, useRef } from "react";
// Any async function or function that returns a promise
async function myDownloadAsyncFunction(data) {
return fetch('https://mydomain.test/path');
}
function DownloadButton() {
const queue = useRef(Promise.resolve());
const [clickCount, setClickCount] = useState(0);
useEffect(() => {
if (clickCount == 0) return;
queue.current = queue.current
.then(() => myDownloadAsyncFunction('My data'))
.catch((err) => {console.error(err)});
}, [clickCount]);
function onClickDownload() {
setClickCount(clickCount + 1);
}
return (
<button onClick={onClickDownload}>Download</button>
);
}
Tenga en cuenta que en los dos ejemplos anteriores es posible que deba volverse más complicado para lidiar mejor con algunas de las descargas que fallan. Sin embargo, en estos ejemplos, si una descarga falla, la siguiente debería continuar intentando descargarse.
Una forma sencilla es:
const [downloading,setDownloading] = useState(false)
useEffect( ()=> {
if(downloadQueue.length && !downloading){
myDownloadAsyncFunction(downloadQueue[0].data).then(()=>{
setDownloading(false)
setDownLoadQueue((a) => a.slice(1))
})
}
},[downloadQueue])
A partir de su código, no estoy seguro de cómo pasa el parámetro a myDownloadAsyncFunction() . Aquí asumo que usa downloadQueue[0].data .