javascript - 如何使用从 api 接收的数据制作动态进度条

Question

我有一个 API，如果有人做对了数学、化学或物理，它就会发送分数。 api 发送这样的响应

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

因此，如果一个人完成了一个问题，那么它会发布答案，我们从 api 获得分数。现在我想要的是让分数以进度条的形式显示。 这就是我对文本区域及其函数和进度条进行编码的方式

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

这是我们获取 api 并存储进度条分数的函数

  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 状态变量中并访问它以使进度条动态化。

这是我到目前为止所做的进度条，显然不起作用，因为我相信，从 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>

Answer 1

我这样做是为了加载进度条。我正在使用 Bootstrap ，所以 I used their progress bar element :

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

但正如您所提到的，您希望这是动态的。因此，您想要的是当进度条组件加载时，您希望它进行 API 调用并传递回调函数以将状态修改为可以插入进度条的值。

因此，使用我的 Bootstrap 示例，进度条现在可能如下所示:

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

因此，当您加载此组件时，运行一个函数(当组件安装时)来调用 API，但传入一个回调函数来更新 uploadProgress。

我正在使用 React Hooks(我强烈推荐它们)，以下是我设置 uploadProgress 的方法:

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

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

总结一下:

1. 让您的 API 结果运行一个函数(向 actionCreator 发送一个操作)来更新状态。
2. 在进度条组件中访问此状态
3. 使用该状态值作为进度条的值

如果您有任何问题，请告诉我 - 我自己对此很陌生，但这就是我设法做到的，而且效果非常好!