javascript - React 渲染函数阻止每次调用时创建新的 Canvas 元素 - Charts.js

Question

我正在使用React、Charts.js 和react-chart.js。

我正在发出一个 API 请求，该请求返回我随后可视化的数据。我遇到的问题是，当页面最初加载时，它只显示其中一个名称，然后再次呈现并显示三个名称的完整列表。问题是每次调用渲染函数时都会创建一个新图形。

有谁知道是否有一种方法可以防止每次创建新图表，而是覆盖以前创建的图表？

Canvas 被渲染两次，我猜这是代码设置方式所期望的。在第一个 Canvas 元素上它只有一个名称，但在第二个 Canvas 上它包含所有三个名称

请参阅下面的代码:

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

我认为问题不在于React，而在于ChartJS......它正在获取新信息......但不是更新......而是插入新 Canvas ......

尝试设置redraw .

来自文档 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 />