Javascript 将Axios添加到React图表并获取JSON数据

我目前正在练习React并逐渐习惯图表

在使用React图表并调用Axios从在线JSON文件获取信息时，我经历了一段艰难的时光

它与预先编程的值完美配合，但使用Axios调用时不会产生结果

我对如何以正确的方式将Axios应用于现有代码有疑问！非常感谢您的帮助

 import React, { Component } from "react";
 import { Doughnut } from "react-chartjs-2";
 import axios from "axios";

 const headingStyle = {
  "text-align": "center"
  };

  const data = {
  labels: ["In", "out", "Balance"],
 datasets: [
 {
 //   data: [300, 100, 200],
  backgroundColor: ["#27DD73", "#FF2400", "#36A2EB"],
  hoverBackgroundColor: ["#27DD73", "#FF2400", "#36A2EB"]
  }
    ]
  };



 class DoughnutExample extends Component {
 async componentDidMount() {
    const { data: users } = await axios.get(
      "https://api.myjson.com/bins/bw0u4"
    );
    this.setState({ users });
  }
 render() {
 return (
  <div className="card card-1" style={{ padding: "10px" }}>
    <h3 style={headingStyle}>Cash Flow</h3>
    <Doughnut data={data} />
  </div>
 );
   }
 }

export default DoughnutExample;

我的JSON文件在这里：

我希望从JSON获取图表数据。

render中没有数据变量。由于响应存储到状态，因此应相应地使用它：

<Doughnut data={this.state.users} />

---

除此之外，还有。

嘿，埃斯特斯，谢谢你的帮助。我确实尝试了this.state.users，但出现了一个名为cannotread属性'users'为null的错误。任何可能出现错误的输入？除非您将this.state指定为null，否则错误可能涉及另一段代码，例如JSON响应（如果它与您显示的不同）。我使用了如上所示的确切代码段。所以状态不被赋值为null。同样的json。我确实检查了代码片段，你在stackblitz中提供了链接。它从json获取数据，但我只是试图将json中的图表值显示为react cahrt js中的圆环图。它将是空的。我想这就是问题所在，埃斯托斯！谢谢你的帮助。

this.setState({ users: users.map(({ chart }) => chart) });