React component called twice (AJAX call async)
<p><strong>What I want to do :</strong></p>

<p>I would like to create a pie chart with the javascript library d3.js. I get data from my server with an AJAX call, and then create my piechart with it.</p>

<p><strong>What I've done :</strong></p>

<p>For this I created 2 react component : one which implements the ajax call and pass his state to the other component which create the pie chart with the data in props.</p>

<p>First component :</p>

<pre><code>import React from 'react';
import Pie from './pie.jsx';

class RingChart extends React.Component {
  loadPieChart() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: (data) =&gt; {
        let d3data = Object.keys(data)
          .filter(key =&gt; key!= 'pourcentage')
          .map(key =&gt; { return {name: key, value: data[key]} });
        this.setState({dataPie: d3data, percent: data['pourcentage']});
      },
      error: (xhr, status, err) =&gt; {
        console.error(this.props.url, status, err.toString());
      }
    });
  }

  constructor(props) {
    super(props);
    this.state = {dataPie: [], percent: 0};
  }

  componentDidMount() {
    this.loadPieChart();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  }

  render() {
    return (
    &lt;div className="chart"&gt;
      &lt;Pie size="400" data={this.state.dataPie} percent={this.state.percent}&gt;&lt;/Pie&gt;
    &lt;/div&gt;
    );
  }
}

export default RingChart;
</code></pre>

<p>Here my second component which create my pie chart :</p>

<pre><code>import React from 'react';

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

  componentDidUpdate() {
    let size = this.props.size;
    const data = this.props.data;
    let percent = this.props.percent;

    console.log(data);

    var margin = {top: 20, right: 20, bottom: 20, left: 20};
    let width = size - margin.left - margin.right;
    let height = width - margin.top - margin.bottom;

    var chart = d3.select(".ring")
                    .append('svg')
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                   .append("g")
                    .attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");

    var radius = Math.min(width, height) / 2;

    var color = d3.scale.ordinal()
        .range(["#313F46", "#4DD0E1"]);

    var arc = d3.svg.arc()
        .outerRadius(radius)
        .innerRadius(radius - 20);

    var pie = d3.layout.pie()
        .sort(null)
        .startAngle(1.1*Math.PI)
        .endAngle(3.1*Math.PI)
        .value(function(d) { return d.value; });


    var g = chart.selectAll(".arc")
      .data(pie(data))
      .enter().append("g")
      .attr("className", "arc");
      function tweenPie(b) {
        var i = d3.interpolate({startAngle: 1.1*Math.PI, endAngle: 1.1*Math.PI}, b);
        return function(t) { return arc(i(t)); };
      }
    g.append("path")
        .attr("fill", function(d, i) { return color(i); })
      .transition()
        .ease("exp")
        .duration(600)
        .attrTween("d", tweenPie);

    g.append("text")
          .attr("dy", ".35em")
          .style("text-anchor", "middle")
          .style("color", "#263238")
          .style("font-size", "55px")
          .attr("className", "text-pie")
          .text(function(d) { return percent+'%'; });

  }

  render() {
    return (&lt;div className="ring" style={{textAlign:'center'}}&gt;&lt;/div&gt;)
  }
}

export default Pie;
</code></pre>

<p><strong>My problem :</strong></p>

<p>Nothing is created ... The console.log(data) in my second component return firstly an empty array and secondly my array with the correct values. It's weird that nothing is created, but even if it was created, my component Pie is call twice.</p>

<p>How can I call my component only once ?
Why my component is not created ?
How can I do for that my pie chart will be update automatically when new values appears on my server ?</p>

<p>thank's a lot, I'm discovering react.js, a lot of basic's notions is unknow for me.</p>

<p><strong>EDIT</strong> : Ok now my component is created, I had forgotten the ".ring" in my line : <code>var chart = d3.select("ring")</code> -_-.</p>

<p>But as I said before, now two component are created (one empty, and one correct). Sometimes I have two components created correctly. It depends on the AJAX call ... How can I solve the problem of the async AJAX call ?</p>