Reactjs React-使用axios类内组件集成D3 PieChart API（如何获取数据）

如何获取数据

以下是我的组件代码：

import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Bar } from 'react-chartjs-2';
import { makeStyles } from '@material-ui/styles';
import axios from 'axios'
import ReactD3 from "react-d3-components";
var PieChart = require('react-d3-components').PieChart;


//dummy data from d3 
var data = {
  label: 'something',
  values: [
    { x: 'SomethingA', y: 10 },
    { x: 'SomethingB', y: 4 },
    { x: 'SomethingC', y: 3 },
    { x: 'SomethingD', y: 3 },
    { x: 'SomethingE', y: 1 }
  ]
};


//tooltip
var tooltipScatter = function(x, y) {
  return "x: " + x + " y: " + y;
};
var sort = null;

class UsersByDevic extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    axios.get('http://127.0.0.1:5000/data')
      .then(response => {
        console.log("!!!!!!!!!!!!!!!!!!!!!!!!!", response.data);
        this.setState({
          data: response.data.pie_chart,
        })
        console.log("@@@@@@@@@@@", this.state.data)
      })
      .catch(error => {
        console.log("CHECK ERROR", error)
      })
  }

  render() {
    const { data } = this.state
    return (
      <div>
        { data.length 
          ? data.map(data => <div>
            <PieChart
              data={data}
              width = {500}
              tooltipHtml={tooltipScatter}
              height={500}
              margin={{
                top: 10,
                bottom: -200,
                left: 100,
                right: 100
              }}
              sort={sort}
            />
          </div>
        ) : null
      }
      </div>
    )
  }
}

UsersByDevic.propTypes = {
  className: PropTypes.string
};

export default UsersByDevic;

我收到错误：

1.TypeError:无法读取未定义饼图的属性“length” E:/TASK/template/react material dashboard master/node_modules/react-d3-components/node_modules/d3/d3.js:6633 6630 | d3.layout.pie=函数（）{ 6631 | var值=数量，排序=d3 _布局_pieSortByValue，startAngle=0，endAngle=τ，padAngle=0； 6632 |函数饼图（数据）{ 6633 | var n=data.length，values=data.map（函数（d，i）{ |^6634 |返回+值。调用（饼图、d、i）

或

列表中的每个孩子都应该有一个唯一的“键”道具

---

从API获取的数据格式不是组件所期望的格式

您必须以以下格式格式化所获取的数据：

{
  label: 'Cost Distribution',
  values: [
    { x: "Equity", y: 300 },
    { x: "Real-estate", y: 270 },
    { x: "Debt", y: 230 },
    { x: "Bullion", y: 180 },
    { x: "Insurance", y: 20 }
  ]
}

一旦设置好格式并使用此格式设置了

数据

，还必须更改

渲染

方法中的条件：

render() {
  const { data } = this.state;
  return (
    <div>
    {
      data 
      ? <div>
          <PieChart
            data={data}
            width={500}
            tooltipHtml={tooltipScatter}
            height={500}
            margin={{ top: 10, bottom: -200, left: 100, right: 100 }}
            sort={sort}
          />
        </div>
      : null
    } 
    </div>
  );
}

render（）{
const{data}=this.state；
返回(
{
资料
? 
：null
} 
);
}

---

这是给你的裁判的一封信

---

感谢您的帮助，工作示例演示显示：在/turbo_模块中出错/d3@3.5.17/d3.js（6633:20）无法读取未定义的属性“length”。因此初始化数据=[]在构造函数中，通过类似TypeError的错误：data.map不是function@sandhyashrinivas，我认为我的更改并没有反映出问题。我已使用正确的StackBlitz链接更新了答案。我已验证它现在是否按预期工作。请查看。对于这些问题，我深表歉意。：）

render() {
  const { data } = this.state;
  return (
    <div>
    {
      data 
      ? <div>
          <PieChart
            data={data}
            width={500}
            tooltipHtml={tooltipScatter}
            height={500}
            margin={{ top: 10, bottom: -200, left: 100, right: 100 }}
            sort={sort}
          />
        </div>
      : null
    } 
    </div>
  );
}