反应中有圆形进度条的问题

Question

所以我就像一个减肥应用程序，你把食物，量，它的碳水化合物，蛋白质和脂肪的数量，它创建了一个清单。还有一个盒子，里面有三个圆形的进度条，活动值是每一种营养素的百分比，空的是卡路里。它工作得很好，当我加一些东西时，值就会增加20%，再加到32%，如果我取出来的话，就很好了。问题是，我吃了两顿饭，一顿有20克碳水化合物，另一餐有0。当我加上第一个，酒吧去了，比方说30%。当我加上另一个的时候，什么都没发生。但如果我去掉20克碳水化合物的膳食，酒吧的价值一点也不改变。就像那样。

​

​

当我摘下第二根香蕉时，酒吧保持原样。

​

​

我有碳水化合物百分比

const carbPercentage = ((carbSum * 4 * 100) / calorieSum).toFixed(1);

我在进度条的值上尝试了三元操作符

<CircularProgressbar
            value={Number(carbPercentage) === 0 ? 1 : Number(carbPercentage)}
            maxValue={totalCarbBar}
            text={carbPercentage + "%"}
            styles={buildStyles({
              pathTransitionDuration: 1,
              pathColor: "#e5383b",
              textColor: "#242423",
              trailColor: "#333533",
            })}
          ></CircularProgressbar>

我部署了它，所以您可以在这里查看它，https://macro-trackerreact.web.app/，下面是git存储库https://github.com/JosephKorel/macro-count

Answer 1

试着保持这种状态，但是您将更改循环进度栏，如下所示

<CircularProgressbar
            value={Number(carbPercentage) === 0 ? 1 : Number(carbPercentage)}
            maxValue={totalCarbBar}
            text={carbPercentage + "%"}
            styles={buildStyles({
              pathTransitionDuration: 1,
              pathColor: "#e5383b",
              textColor: "#242423",
              trailColor: "#333533",
            })}
          />