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() 中有兩件事

1. 獲取api
2. 渲染條形圖，將在同一批次中運行

所以當 api 調用發生時 setState 不會分配 state.data 值，因為它是異步的。 但是接下來當您的條形圖想要呈現時，它會以空值作為參數。

這就是它不起作用的原因。

我建議你把 this.barChart(data.data) 放在 fetch api 中。