Reactjs 如何根据React JS中的数据更新循环进度？

我正在构建一个MERN应用程序，我想在应用程序的dashboad中使用循环进度。a希望的是，当我从API端点获取数据时，我希望循环进度根据获取的数据编号更新循环指示。我已经试着去实现它了，我缺少了一块拼图，所以圆形指示器可以根据灌木丛的编号移动。唯一不起作用的是表示数字的圆圈。有人能给我一些建议如何解决这个问题吗？谢谢 以下是我正在尝试做的事情：

ProgressCircular.js:

import React, { useState, useEffect } from "react";
import { Box } from "@material-ui/core";
import { useColorIndication } from "./useColorIndication";
import { ProgressArc } from "./ProgressArc";
import axios from "axios";

export function ProgressCircleWrapper() {
  const svgWidth = 150;
  const arcWidth = 12;
  const [dashboard, setDashboard] = useState([]);
  const [progressPercentage, setProgressPercentage] = useState(0);
  const colorIndicator = useColorIndication(progressPercentage);

  useEffect(() => {
    axios
      .get("http://localhost:3001/dashboard")
      .then((res) => {
        setDashboard(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  function valueText(value) {
    return `${value}°C`;
  }

  function setProgressValue(event, value) {
    setProgressPercentage(value);
  }

  return (
    <Box padding="3rem" justifyContent="center">
      {dashboard &&
        dashboard.map((item, index) => (
          <Box key={index} width="50%">
            <ProgressArc
              svgWidth={svgWidth}
              arcWidth={arcWidth}
              dashboard={item.wasteFromProduction}
              progressPercentage={progressPercentage}
              colorIndicator={colorIndicator}
              defaultValue={0}
              getAriaValueText={valueText}
              aria-labelledby="discrete-slider-small-steps"
              step={1}
              marks
              min={0}
              max={100}
              valueLabelDisplay="auto"
              onChange={(event, value) => {
                setProgressValue(event, value);
              }}
            />
            <ProgressArc
              svgWidth={svgWidth}
              arcWidth={arcWidth}
              dashboard={item.wrappingPackaging}
              progressPercentage={progressPercentage}
              colorIndicator={colorIndicator}
              defaultValue={0}
              getAriaValueText={valueText}
              aria-labelledby="discrete-slider-small-steps"
              step={1}
              marks
              min={0}
              max={100}
              valueLabelDisplay="auto"
              onChange={(event, value) => {
                setProgressValue(event, value);
              }}
            />
          </Box>
        ))}
    </Box>
  );
}

import React from "react";
import * as d3 from "d3";

export function ProgressArc({
  svgWidth,
  arcWidth,
  dashboard,
  progressPercentage,
  colorIndicator,
}) {
  const svgHeight = svgWidth;
  const arcOuterRadius = svgWidth / 12;
  const arcInnerRadius = svgWidth / 7 - arcWidth;
  const arcGenerator = d3
    .arc()
    .innerRadius(arcInnerRadius)
    .outerRadius(arcOuterRadius)
    .startAngle(0)
    .cornerRadius(5);
  const progressArc = (value) =>
    arcGenerator({
      endAngle: 2 * Math.PI * value,
    });

  return (
    <div>
      <svg height={svgHeight} width={svgWidth}>
        <g transform={`translate(${svgWidth / 2}, ${svgHeight / 2})`}>
          <path d={progressArc(1)} opacity="0.2" fill="gray" />
        </g>
        <g transform={`translate(${svgWidth / 2}, ${svgHeight / 2})`}>
          <path
            d={progressArc(progressPercentage / 100)}
            fill={colorIndicator}
          />
          <text x="20" y="5">
            {`${dashboard}`}
          </text>
        </g>
      </svg>
    </div>
  );
}

 import { useEffect, useState } from "react";

export function useColorIndication(progressPercentage: number) {
  const [colorIndicator, setColor] = useState("red");
  useEffect(() => {
    progressPercentage >= 50 ? setColor("green") : setColor("red");
  }, [progressPercentage]);
  return colorIndicator;
}

---

数据只提取一次，提取后显示数据中的循环程序。因此，不要期望循环将动画化，它将与提取的数据保持一致。

数据提取一次，提取后，您将根据数据显示循环程序。因此，不要期望循环会动画化，它将保留获取的数据。

问题： 您没有更新progressPercentage值，它始终为0% 解决方案： 如果您试图设置GET请求的

进度

，则可以使用

onDownloadProgress

：

axios
  .get("http://localhost:3001/dashboard", {
    onDownloadProgress: progressEvent => {
      console.log(progressEvent)
      //--> set the progress value here
    }
  })
  .then(res => {
    setDashboard(res.data);
  })
  .catch(error => {
    console.log(error);
  });

如果试图从仪表板项目属性获取百分比值：

<ProgressArc
   svgWidth={svgWidth}
   arcWidth={arcWidth}
   dashboard={item.wasteFromProduction}
   progressPercentage={item.wasteFromProduction.replace(/[^\d]/g, "")}
   colorIndicator={colorIndicator}
   defaultValue={0}
   getAriaValueText={valueText}
   //...
/>

问题： 您没有更新progressPercentage值，它始终为0% 解决方案： 如果您试图设置GET请求的

进度

，则可以使用

onDownloadProgress

：

axios
  .get("http://localhost:3001/dashboard", {
    onDownloadProgress: progressEvent => {
      console.log(progressEvent)
      //--> set the progress value here
    }
  })
  .then(res => {
    setDashboard(res.data);
  })
  .catch(error => {
    console.log(error);
  });

如果试图从仪表板项目属性获取百分比值：

<ProgressArc
   svgWidth={svgWidth}
   arcWidth={arcWidth}
   dashboard={item.wasteFromProduction}
   progressPercentage={item.wasteFromProduction.replace(/[^\d]/g, "")}
   colorIndicator={colorIndicator}
   defaultValue={0}
   getAriaValueText={valueText}
   //...
/>

您是否正在尝试显示get请求进度？我正在尝试使循环进度根据数据的数量显示pourcentage。您从何处获取数据的数量？从后端的我的mongodb您是否正在尝试显示get请求进度？我正在尝试使循环进度根据数据的数量显示pourcentage数据的数量。从哪里获取数据的数量？从后端的我的mongodb感谢您的输入@Soufiane Boutahlit，我要做的是在获取数据时，圆圈应该指示数据的数量。正如您在屏幕截图中所看到的，两个循环程序上都没有任何内容。你有什么想法吗？试着把这个d={progressArc（progressPercentage/100）}改为d={progressArc（dashboard/100）}，并确保dashboard的值是一个数字。感谢你的输入@Soufiane Boutahlit，我要做的是，当获取数据时，圆圈应该指示数据的大小。正如您在屏幕截图中所看到的，两个循环程序上都没有任何内容。你有什么想法吗？尝试将这个d={progressArc（progressPercentage/100）}更改为d={progressArc（dashboard/100）}，并确保dashboard的值是一个数字。谢谢你的建议@lissettdm，你能解释更多吗？我需要了解你想要实现什么。如果每个项目都有这样的进展？你想要一些动画，或者只是根据总数设置项目百分比？我需要使圆形条根据pourcentage的编号移动，例如，这两个循环的pourcentage分别为34%和50%，我所期望的是，循环中也必须指明循环中的这两个数字。我不知道如果我解释得好，你会从这个道具项目中得到这个百分比吗。生产和项目的浪费。包装包装？谢谢你的建议@lissettdm，你能解释更多吗？我需要了解你想要实现什么。如果每个项目都有这样的进展？你想要一些动画，或者只是根据总数设置项目百分比？我需要使圆形条根据pourcentage的编号移动，例如，这两个循环的pourcentage分别为34%和50%，我所期望的是，循环中也必须指明循环中的这两个数字。我不知道如果我解释得好，你会从这个道具项目中得到这个百分比吗。生产和项目的浪费。包装包装？