使用获取数据的React-D3

Question

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'))

我正在使用React和D3来可视化图形。我试图获取GDP的数据，并使用这些数据，但我在页面上什么也得不到。

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

对这件事有什么想法？

Answer 1

当组件开始呈现时，第一件事就是在componentDidMount()中调用componentDidMount() .So。

1. fetching
2. 渲染条形图，将在same batch

中运行

因此，当api调用发生时，setState不会分配state.data值，因为它是异步的。但是下一步，当你的条形图想要渲染时，它会得到空值作为参数。

这就是它不能工作的原因。

我建议您将this.barChart(data.data)放入fetch api中。