React render函数防止每次调用时创建新的canvas元素-Charts.js

Question

I am using React, Charts.js and react-chart.js.

I am making an API request which returns data that i am then visualizing. The problem I am having is that when the page initially loads it only displays one of the names, an then it renders again and the complete list of three names is shown. The problem is that a new graph is created each time the render function is invoked.

Does anyone know if there is a way to prevent a new graph being created each time, but instead to overwrite the previous graph that was created?

The canvas is being rendered twice, which I guess is expected the way the code is setup. On the first canvas element it just has one name, but then on the second canvas it contains all three names

Please see my code below:

var App = React.createClass({
  getInitialState: function() {
    return {
      names: [],
      isLoaded: false
    }
  },
  componentDidMount: function() {
    $.get(url, function(data) {
      this.setState({
        names: data,
        isLoaded: true
      })
    }.bind(this));
  },
  render: function() {
    return ( < div > {
      this.state.isLoaded ? < Graph names = {
        this.state.names
      }
      /> : <div>Still Loading... </div >
    } < /div>)
  }
});

var Graph = React.createClass({

  render: function() {
    var names = [];
    for (var i = this.props.artists.length - 1; i >= 0; i--) {
      names.push(this.props.names[i].name);
    }

    var chartData = {
      labels: names,
      datasets: [{
        data: goals
      }, {
        data: predictions
      }]
    };

    return <LineChart data = {chartData} width = "600" height = "250" / >
  }
});

Answer 1

I think the problem is not on React, but in ChartJS ... It's getting new information... but instead of updating ... it is inserting new canvas..

Try setting redraw .

From the docs https://github.com/reactjs/react-chartjs

if data passed into the component changes, points will animate between values using chart.js' .update(). If you want the chart destroyed and redrawn on every change, pass in redraw as a prop. For example <LineChart data={this.state.chartData} redraw />

Answer 2

This sounds like intended behaviour of React -- it will always rerender when the state changes. Your only options are to not bind your render to the state, or control if the update should get called. Without knowing what you're trying to accomplish, the react-chart docs seem to indicate it won't rerender/redraw the initial Canvas element .

If you want to manually control when the component will update, use the shouldComponentUpdate method.

Use shouldComponentUpdate() to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

shouldComponentUpdate: function(nextProps, nextState) {
  // return true to continue with update, false to stop it
  return this.props.names.length == 0 && nextProps.names.length > 0
},

This could have side effects, such as if you are depending on props.names elsewhere and want that updated.