Reactjs React-D3使用fetch数据 类MyChart扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 数据：空 } this.fetchData=this.fetchData.bind（this）； this.barChart=this.barChart.bind（this）； } componentDidMount（）{ 这是fetchData（）； 此.barChart（此.state.data）； } fetchData（）{ 常数API=https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json' 获取（API） .then（response=>response.json（）） 。然后（数据=>{ 这是我的国家({ 数据：data.data }) }) } 条形图（数据集）{ 常数画布宽度=600； 常数画布高度=400； const svgCanvas=d3.select（this.refs.canvas） .append（'svg'） .attr（“宽度”，画布宽度） .attr（“高度”，画布高度） 常量xScale=d3.scaleLinear（） .domain（[0，d3.max（数据集，d=>d[0]）） .范围（[0，画布宽度]） 常量yScale=d3.scaleLinear（） .domain（[0，d3.max（数据集，d=>d[1]）） .范围（[画布高度，0]） svgCanvas.selectAll（'rect'） .数据（数据集） .输入（） .append（'rect'） .attr（'class'，'bar'） .attr（'x'，（d，i）=>i*30） .attr（'y'，d=>yScale（d[1]）） .attr（'width'，xScale（25）） .attr（'height'，d=>yScale（d[1]）） } render（）{ 返回( 我的图表 ) } } ReactDOM.render（，document.getElementById（'app'））

我使用React来可视化D3图形。 我试图获取GDP数据，并使用这些数据，但我在页面上什么都没有

当我只是把一个数组作为自己的测试输入，而不是提取数据时， 它至少显示了一些基于输入的内容。我认为在获取数据时会出现问题

---

对此有什么想法吗？

当组件开始渲染时，第一件事将被称为

componentDidMount（）

。因此在componentDidMount（）中有两件事

获取api

渲染条形图，将在同一批中运行

因此，当api调用发生时，setState不会分配state.data值，因为它是异步的。 但下一步，当您的条形图要呈现时，它将获取null值作为参数

这就是它不起作用的原因

---

我建议您将this.barChart（data.data）放在FetchAPI中。

谢谢您的想法。这有助于我了解更多！

class MyChart extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: null
    }

    this.fetchData = this.fetchData.bind(this);
    this.barChart = this.barChart.bind(this);
  }

  componentDidMount() {
    this.fetchData();
    this.barChart(this.state.data);
  }

  fetchData() {
    const API = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json'

    fetch(API)
    .then(response => response.json())
    .then(data => {
      this.setState({
        data: data.data
      })
    })
  }

  barChart(dataset) {
    const canvasWidth = 600;
    const canvasHeight = 400;
    const svgCanvas = d3.select(this.refs.canvas)
                     .append('svg')
                     .attr('width', canvasWidth)
                     .attr('height', canvasHeight)

    const xScale = d3.scaleLinear()
                      .domain([0, d3.max(dataset, d => d[0])])
                      .range([0, canvasWidth])

    const yScale = d3.scaleLinear()
                      .domain([0, d3.max(dataset, d => d[1])])
                      .range([canvasHeight, 0])

    svgCanvas.selectAll('rect')
            .data(dataset)
            .enter()
              .append('rect')
              .attr('class', 'bar')
              .attr('x', (d, i) => i * 30)
              .attr('y', d => yScale(d[1]))
              .attr('width', xScale(25))
              .attr('height', d => yScale(d[1]))

  }

  render() {
    return (
      <d>
        <div id='title'>my chart</div>
        <div ref='canvas'></div>
      </d>
    )
  }
}

ReactDOM.render(<MyChart />, document.getElementById('app'))