Reactjs 修改React模板以调用API而不是硬编码数据

新的学习反应。完成了一些关于使用Axios调用API的教程，Axios可以很好地用于API调用。然而，我现在正试图将我学到的知识整合到React模板中。所讨论的模板是

我在下面有完整的BlogOverview.js文件

import React from "react";
import PropTypes from "prop-types";
import { Container, Row, Col } from "shards-react";

import PageTitle from "./../components/common/PageTitle";
import SmallStats from "./../components/common/SmallStats";
import PendantUsage from "./../components/blog/PendantUsage";
import UsersByDevice from "./../components/blog/UsersByDevice";
import NewDraft from "./../components/blog/NewDraft";
import Discussions from "./../components/blog/Discussions";
import TopReferrals from "./../components/common/TopReferrals";

const BlogOverview = ({ smallStats }) => (
  <Container fluid className="main-content-container px-4">
    {/* Page Header */}
    <Row noGutters className="page-header py-4">
      <PageTitle
        title="Blog Overview"
        subtitle="Dashboard"
        className="text-sm-left mb-3"
      />
    </Row>

    {/* Small Stats Blocks */}
    <Row>
      {smallStats.map((stats, idx) => (
        <Col className="col-lg mb-4" key={idx} {...stats.attrs}>
          <SmallStats
            id={`small-stats-${idx}`}
            variation="1"
            chartData={stats.datasets}
            chartLabels={stats.chartLabels}
            label={stats.label}
            value={stats.value}
            percentage={stats.percentage}
            increase={stats.increase}
            decrease={stats.decrease}
          />
        </Col>
      ))}
    </Row>

    <Row>
      {/* Users Overview */}
      <Col lg="8" md="12" sm="12" className="mb-4">
        <PendantUsage />
      </Col>

      {/* Users by Device */}
      <Col lg="4" md="6" sm="12" className="mb-4">
        <UsersByDevice />
      </Col>

      {/* New Draft */}
      <Col lg="4" md="6" sm="12" className="mb-4">
        <NewDraft />
      </Col>

      {/* Discussions */}
      <Col lg="5" md="12" sm="12" className="mb-4">
        <Discussions />
      </Col>

      {/* Top Referrals */}
      <Col lg="3" md="12" sm="12" className="mb-4">
        <TopReferrals />
      </Col>
    </Row>
  </Container>
);

BlogOverview.propTypes = {
  /**
   * The small stats dataset.
   */
  smallStats: PropTypes.array
};

BlogOverview.defaultProps = {
  smallStats: [
    {
      label: "Battery Level",
      value: "98%",
      percentage: "4.7%",
      increase: true,
      chartLabels: [null, null, null, null, null, null, null],
      attrs: { md: "6", sm: "6" },
      datasets: [
        {
          label: "Today",
          fill: "start",
          borderWidth: 1.5,
          backgroundColor: "rgba(0, 184, 216, 0.1)",
          borderColor: "rgb(0, 184, 216)",
          data: [1, 9, 1, 3, 5, 4, 7]
        }
      ]
    },
    {
      label: "Last Event",
      value: "14th Dec",
      percentage: "4.7%",
      increase: true,
      chartLabels: [null, null, null, null, null, null, null],
      attrs: { md: "6", sm: "6" },
      datasets: [
        {
          label: "Today",
          fill: "start",
          borderWidth: 1.5,
          backgroundColor: "rgba(0, 184, 216, 0.1)",
          borderColor: "rgb(0, 184, 216)",
          data: [1, 2, 1, 3, 5, 4, 7]
        }
      ]
    },
    {
      label: "Pages",
      value: "182",
      percentage: "12.4",
      increase: true,
      chartLabels: [null, null, null, null, null, null, null],
      attrs: { md: "6", sm: "6" },
      datasets: [
        {
          label: "Today",
          fill: "start",
          borderWidth: 1.5,
          backgroundColor: "rgba(23,198,113,0.1)",
          borderColor: "rgb(23,198,113)",
          data: [1, 2, 3, 3, 3, 4, 4]
        }
      ]
    },
    {
      label: "Comments",
      value: "8,147",
      percentage: "3.8%",
      increase: false,
      decrease: true,
      chartLabels: [null, null, null, null, null, null, null],
      attrs: { md: "4", sm: "6" },
      datasets: [
        {
          label: "Today",
          fill: "start",
          borderWidth: 1.5,
          backgroundColor: "rgba(255,180,0,0.1)",
          borderColor: "rgb(255,180,0)",
          data: [2, 3, 3, 3, 4, 3, 3]
        }
      ]
    },
    {
      label: "New Customers",
      value: "29",
      percentage: "2.71%",
      increase: false,
      decrease: true,
      chartLabels: [null, null, null, null, null, null, null],
      attrs: { md: "4", sm: "6" },
      datasets: [
        {
          label: "Today",
          fill: "start",
          borderWidth: 1.5,
          backgroundColor: "rgba(255,65,105,0.1)",
          borderColor: "rgb(255,65,105)",
          data: [1, 7, 1, 3, 1, 4, 8]
        }
      ]
    },
    {
      label: "Subscribers",
      value: "17,281",
      percentage: "2.4%",
      increase: false,
      decrease: true,
      chartLabels: [null, null, null, null, null, null, null],
      attrs: { md: "4", sm: "6" },
      datasets: [
        {
          label: "Today",
          fill: "start",
          borderWidth: 1.5,
          backgroundColor: "rgb(0,123,255,0.1)",
          borderColor: "rgb(0,123,255)",
          data: [3, 2, 3, 2, 4, 5, 4]
        }
      ]
    }
  ]
};

export default BlogOverview;

从“React”导入React；
从“道具类型”导入道具类型；
从“碎片反应”导入{Container，Row，Col}；
从“/。/components/common/PageTitle”导入页面标题；
从“/./components/common/SmallStats”导入SmallStats；
从“/./components/blog/PendantUsage”导入PendantUsage；
从“/./components/blog/UsersByDevice”导入UsersByDevice；
从“/./components/blog/NewDraft”导入新草稿；
从“/./components/blog/Discussions”导入讨论；
从“/。/components/common/TopReferrals”导入TopReferrals；
const BlogOverview=（{smallStats}）=>(
{/*页眉*/}
{/*小统计数据块*/}
{smallStats.map（（stats，idx）=>(
))}
{/*用户概述*/}
{/*按设备划分的用户*/}
{/*新草案*/}
{/*讨论*/}
{/*顶级推荐*/}
);
BlogOverview.propTypes={
/**
*小型统计数据集。
*/
smallStats:PropTypes.array
};
BlogOverview.defaultProps={
smallStats：[
{
标签：“电池电量”，
值：“98%”，
百分比：“4.7%”，
增加:对,，
chartLabels:[null，null，null，null，null，null，null]，
属性：{md:“6”，sm:“6”}，
数据集：[
{
标签：“今天”，
填充：“开始”，
边框宽度：1.5，
背景色：“rgba（0184216,0.1）”，
边框颜色：“rgb（0184216）”，
数据：[1,9,1,3,5,4,7]
}
]
},
{
标签：“最后一个事件”，
价值：“12月14日”，
百分比：“4.7%”，
增加:对,，
chartLabels:[null，null，null，null，null，null，null]，
属性：{md:“6”，sm:“6”}，
数据集：[
{
标签：“今天”，
填充：“开始”，
边框宽度：1.5，
背景色：“rgba（0184216,0.1）”，
边框颜色：“rgb（0184216）”，
数据：[1,2,1,3,5,4,7]
}
]
},
{
标签：“页面”，
值：“182”，
百分比：“12.4”，
增加:对,，
chartLabels:[null，null，null，null，null，null，null]，
属性：{md:“6”，sm:“6”}，
数据集：[
{
标签：“今天”，
填充：“开始”，
边框宽度：1.5，
背景色：“rgba（23198113,0.1）”，
边框颜色：“rgb（23198113）”，
数据：[1,2,3,3,3,4,4]
}
]
},
{
标签：“评论”，
值：“8147”，
百分比：“3.8%”，
增加：错，
减少：对，
chartLabels:[null，null，null，null，null，null，null]，
属性：{md:“4”，sm:“6”}，
数据集：[
{
标签：“今天”，
填充：“开始”，
边框宽度：1.5，
背景色：“rgba（255180,0,0.1）”，
边框颜色：“rgb（255180,0）”，
数据：[2,3,3,4,3,3]
}
]
},
{
标签：“新客户”，
值：“29”，
百分比：“2.71%”，
增加：错，
减少：对，
chartLabels:[null，null，null，null，null，null，null]，
属性：{md:“4”，sm:“6”}，
数据集：[
{
标签：“今天”，
填充：“开始”，
边框宽度：1.5，
背景颜色：“rgba（255,65105,0.1）”，
边框颜色：“rgb（255,65105）”，
数据：[1,7,1,3,1,4,8]
}
]
},
{
标签：“订户”，
值：“17281”，
百分比：“2.4%”，
增加：错，
减少：对，
chartLabels:[null，null，null，null，null，null，null]，
属性：{md:“4”，sm:“6”}，
数据集：[
{
标签：“今天”，
填充：“开始”，
边框宽度：1.5，
背景颜色：“rgb（0123255,0.1）”，
边框颜色：“rgb（0123255）”，
数据：[3,2,3,2,4,5,4]
}
]
}
]
};
导出默认日志概述；

在第一个实例中，我想做的就是掌握如何将硬编码的smallStats数据转换为从API返回的数据。例如，第一个项目的硬编码电池电量（值）为98%。我想用它替换API的返回值

我尝试过的一些方法包括使用一个函数进行异步api调用，然后从defaultprops值属性调用该函数。我已经读到您应该从componentDidMount事件执行API调用。所以我试着从SmallStats组件本身开始，但是我无法改变状态，因为它只有道具

---

总之，我感到很困惑。有没有关于我如何越过这个障碍的建议？希望一旦我证明了一个API的集成，而不是使用默认的硬编码数据，我就可以开始了…

长话短说。我想这一切都是因为我不了解反应的细节。最后将无状态函数组件更改为类并引入状态，以便我可以使用ComponentDidMount方法中的API响应对其进行操作