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

【问题标题】：Add Axios to React chart and take JSON data将 Axios 添加到 React 图表并获取 JSON 数据
【发布时间】：2019-02-05 18:50:30
【问题描述】：

我目前正在练习 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 文件在这里：https://api.myjson.com/bins/bw0u4

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

【问题讨论】：

标签： javascript reactjs axios react-chartjs

【解决方案1】：

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

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

如果打算从数组元素中获取chart 键，则应重新映射数组：

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

除此之外，还有no problems with this snippet。

【讨论】：

嘿，埃斯图斯，感谢您的帮助。我确实尝试了“this.state.users”，但收到了一个名为“无法读取 null 的属性‘用户’”的错误。对可能出了什么问题有任何意见吗？
除非您将 this.state 分配为 null，否则该错误可能与另一段代码有关，例如如果 JSON 响应与您显示的不同。
我使用了如上所示的确切代码 sn-p。所以 state 没有赋值为 null。同样的json。我确实检查了代码 sn-p，您在 stackblitz 中提供了链接。它从 json 获取数据，但我试图将 json 中的“图表”值显示为“react cahrt js”中的甜甜圈图。
您没有在原始代码中设置初始状态，state = {}。它将为空。我想这就是问题所在。
埃斯图斯！感谢您的帮助。