Question

我正在使用react并使用react-chartjs从JSON信息挂载图形。我可以从JSON在线获取数据并将其排序为使用map方法所需的数据。但是我从componentDidMount（）需要的数据没有传递给render方法。我尝试使用console.log在不同阶段检查数据。

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

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





 class DoughnutExample extends Component {
 state = {}
 async componentDidMount() {
    this.setState({users: [ ]})
    const { data: users } = await axios.get(
      "https://api.myjson.com/bins/bw0u4"
    );
    this.setState({ users: users.map(({ chart }) => chart) });
    console.log( users)
  }
 render() {
  console.log(this.state.users)

  return (
  <div className="card card-1" style={{ padding: "10px" }}>
    <h3 style={headingStyle}>Cash Flow</h3>
    <Doughnut data={this.state.users} />

   </div>
  );
  }
  }

  export default DoughnutExample;

我的JSON文件：http://myjson.com/bw0u4

Answer 1

users需要初始化为初始状态：

state = {
    users: {}
}

给定甜甜圈图类型的provided data structure和the expected data structure，data道具可以这样初始化：

const { data } = await axios.get(
  "https://api.myjson.com/bins/bw0u4"
);

const users = {
    datasets : [{
        data : data.map(({chart}) => chart)
    }]
}
this.setState({ users });

其中

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

Demo

如何使用http调用挂载chartjs组件？

1 个答案: