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} />; }¿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í.