• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

97
Views
Esperando función con Promises all

Estoy usando el código de aquí para cargar un montón de archivos .csv. Una vez que se cargan, quiero renderizar un componente de reacción. He publicado mi método a continuación que está dentro de un datareader.js. Estoy tratando de averiguar cuál es la mejor manera de llamar a este método desde un componente separado que lo llama y espera a que se complete antes de continuar.

 export async function LoadParkingTicketsData() { let urls = [ "./data/2016.csv", "data/2017.csv" ]; Promise.all( //pass array of promises to Promise.all urls //you have an array of urls .map( //map urls to promises created with parse (url) => new Promise( ( resolve, reject //create one promise ) => Papa.parse(url, { download: true, complete: resolve, //resolve the promise when complete error: reject, //reject the promise if there is an error }) ) ) ) .then(function (results) { **console.log(results[0]);** // log result from file 1 console.log(results[1]); // log result from file 2 }) .catch( //log the error (err) => console.warn("Something went wrong:", err) ); }

Supongo que tendré que hacer algo dentro de useEffect() pero no importa cómo llame a este método, la ejecución continúa y termina llamando a ** línea después. ¿Puede alguien mostrarme la mejor manera de hacer esto para que la carga de datos ocurra y hasta entonces espere?

 export function TimeOfDayTickets() { const [isLoading, setLoading] = useState(true); useEffect(() => { }, []); if (isLoading) { return <div className="App">Loading...</div>; } return <Line options={options} data={chartData} />; }
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

¿Quizás esto es lo que quieres hacer? déjame saber si eso ayuda

 export function TimeOfDayTickets() { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { LoadParkingTicketsData().then((res) => { setData(res); }).finally(() => { setIsLoading(false); }) }, []); if (isLoading) { return <div className="App">Loading...</div>; } return <Line options={options} data={data} />; }

Nota: finally se ejecutará incluso si la función no puede obtener los datos, por lo tanto, isLoading se establecerá en false y el componente Line se representará, si está pasando el estado de los data a Line , debe manejar dentro de él lo que sucede si hay no hay datos, por ejemplo, mostrar un mensaje como "No hay datos disponibles" o algo así.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error