Estoy trabajando en un programador de CPU First Come First Serve con JavaScript. El problema al que me enfrento es que, por alguna razón, mi componente para la visualización del diagrama de Gantt no se procesa cuando se supone que debe hacerlo (cuando se completan los cálculos). Sin embargo, el componente se procesa cuando realizo un cambio en el código y los cálculos se han completado.

Parece que la representación es aleatoria, ya que a veces, cuando agrego un archivo console.log (procesos) para ver qué sucede justo antes de asignar los datos a un proceso, 1) los datos están allí y 2) se representarán aleatoriamente .

Código para el componente Diagrama de Gantt:

 export default function GanttChart({processes}) { return ( <div className="chart-area"> <div className="gantt-chart"> {processes.map((process) => ( <> <div key={process.processName} className="process" style={{ width: (parseInt(process.burstTime, 10)) + "%" }}>{process.processName}</div> </> ))} </div> </div> ) }

Estoy tratando de hacer que este componente se procese después de que se ejecute la función calcTurnAroundWaitingTime() y el ancho de cada "proceso" se basa en el burstTime de ese proceso:

Función que maneja el algoritmo FirstComeFirstServe:

 function handleFCFS(e){ e.preventDefault(); // Pushing the process data from the form to the process array for each process processData.forEach(process => { processes.push(process); }); // Error checking if there are no processes to process by seeing if the first processName === null if (!processes[0].processName){ alert("Nothing to process"); return; } processes.join(); // Joining the array of objects together as a string separated by , processes.sort(orderLeastGreatest); // Sorting the string by calling the compare function that compares the objects arrival times // Calculating completion time calcCompletionTime(processes); // Calculating turnaround time and waiting time calcTurnAroundWaitingTime(processes);