有没有办法动态渲染具有可变宽度的反应组件？

Question

我正在使用 JavaScript 开发先来先服务 CPU 调度程序。我面临的问题是，由于某种原因，我的甘特图可视化组件在应该的时候（计算完成时）没有呈现。然而，当我更改代码并且计算完成时，该组件确实会呈现。

似乎渲染是随机的，因为有时当我添加 console.log(processes) 来查看在将数据映射到进程之前发生的情况时，1）数据在那里，2）它会随机渲染。

甘特图组件的代码：

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>
  )
}

我试图在 calcTurnAroundWaitingTime() 函数执行后渲染此组件，并且每个“进程”的宽度基于该进程的burstTime：

处理 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);