Javascript 如何使用从api接收的数据制作动态progressbar

我有一个api，如果有人数学、化学或物理做得正确，它会给你打分。api将发送如下响应

{
  "scores": {
    "maths": 28,
    "chemistry": 9,
    "physics": 26,
  }
}

因此，如果一个人做了一个问题，那么它会发布答案，我们从api中获得分数。现在我想让分数以进度条的形式显示出来。 这就是我如何编码我的textarea及其函数和progressbar

export default class Science extends Component {
  constructor(props) {
    super(props);
    this.state = {
      snippetDescription: "",
      scoredata: [],
    };
  }
render{
 return(
  <>
    <textarea
              class="textareaclass"
              placeholder="Enter your text here"
              onChange={snippetDescription =>
                this.setState({ snippetDescription })
              }
            ></textarea>
    <Button
               className="btn savebtn"
               onClick={() => this.scoreanalysis({ ...this.state })}
               >
               Analyse
    </Button>
  </>
)}

  scoreanalysis = snippetDescription => {
    fetch("/api/marksapi/:", {
      method: "POST",
      body: JSON.stringify({
        snippetdesc: "snippetDescription"
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    })
      .then(response => response.json())
      .then(textdata => {
            this.setState({
            scoredata: textdata.scores,  //Is this how I save the scores in scoredata to later use in the progressbar?
          });
        },
        error => {
          console.log(error);
        }
      );
  };

问题是我在api中没有做太多的工作，所以如何将数学、化学和物理的值存储在scoredata状态变量中，并访问它以使progressbar动态

这是到目前为止我制作的progressbar，显然不起作用，因为我相信，从api获取是不正确的，所以请任何人告诉我哪里是错误的，并纠正我

    <div class="progress">
              <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"
                          progressbar current="{scoredata.math}">
                          {scoredata.math}
                          <span class="sr-only">10% Complete</span>
              </div>
        </div>

{scoredata.math}
完成10%

我这样做是为了上传进度的加载条。我正在使用引导，因此：

所以我打电话给州政府。此状态由API函数更新

因此，总结如下：

使API结果运行一个函数（向actionCreator发送操作）以更新状态

在进度条组件中访问此状态

将该状态值用作进度条的值

---

如果您有任何问题，请告诉我-我自己对这方面还不熟悉，但这就是我如何做到的，而且效果非常好

我从来没有使用过钩子，我对类组件很满意，因为我从一开始就一直在开发类内组件。另外，我的代码只是一个大组件的一小部分，所以现在将所有内容都更改为挂钩是一个问题。你能在类组件中显示它吗。另外，您在api调用中没有提到scoredata，设置该方式是否正确OK，如果您使用的是类组件，那么您将希望使用该函数通过类组件道具（例如this.props.progressValue）编辑：yes，对这些分数使用setState是正确的方法（我想，我对这一点还是新手），所以我必须对各州使用redux。这不能像我在scoreanalysis功能中所做的那样用react来完成？？？我不确定-过去几个月我一直在大量使用react+Redux，所以这是我真正知道的，我试图记住如果没有Redux，这将如何完成，但我不太确定。Redux非常适合这种类型的东西，因为它使处理不同组件之间的存储和状态变得更加容易——因此我一直在使用它。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" style={{width: uploadProgress + "%"}} aria-valuenow={uploadProgress} aria-valuemin="0" aria-valuemax="100"></div>
</div>

const uploadProgress = useSelector(state => state.uploadProgress);