React/Chartjs 使用按钮更改数据

Question

我开始学习 React 和 Chart JS 但我卡住了，因为我无法通过单击按钮来更改数据，最初的图表是：

var 数据 = [65, 59, 80, 81, 56, 55, 69];

但我想按按钮更改该图表，我搜索了很多信息，并尝试了多种方法，但都不起作用。

有什么帮助吗？

 var Labels = ["2010", "2011", "2012", "2013", "2014", "2015", "2016"];
 var Datas = [65, 59, 80, 81, 56, 55, 69];


const data = {
  labels: Labels
  datasets: [{
    data: Datas,
    backgroundColor: [
    '#FF6384',
    '#36A2EB',
    '#FFCE56'
    ],
    hoverBackgroundColor: [
    '#FF6384',
    '#36A2EB',
    '#FFCE56'
    ]
  }]
};

const legendOpts = {
  display: true,
  position: 'top',
  fullWidth: true,
  reverse: false,
  labels: {
    fontColor: 'rgb(255, 99, 132)'
  }
};

export default React.createClass({
  displayName: 'LegendExample',

  componentWillMount(){
    this.setState(data);
  },

  getInitialState() {
    return {
      legend: legendOpts,
    }
  },


  changeData() {
    const { value } = this.legendOptsInput;
    var oldDataSet = this.state.datasets[0];
    var newData = [65, 59, 80, 81, 56, 55, 69];
    var newDataSet = {
      ...oldDataSet
    };

    newDataSet.data = newData;
    console.log('this is:', newDataSet.data);

    var newState = {
      ...data,
      datasets: [newDataSet]
    };
    try {
      const opts = JSON.parse(value);
      this.setState({
        //legend: opts;
        newState
      });
    } catch(e) {
      alert(e.message);
      throw Error(e);
    }
  },

  render() {
    return (
      <div>
        <h2>Example</h2>
        <textarea
          cols="40"
          rows="15"
          ref={input => { this.legendOptsInput = input; }}
          defaultValue={JSON.stringify(this.state.legend, null, 2)}></textarea>
        <div>
          <button onClick={this.changeData}>Change data!</button>
        </div>
        <Line data={this.state} legend={this.state.legend} redraw />
      </div>
    );
  }
})

Answer 1

看起来您将状态初始化为数据对象，但随后将 newData 设置为状态属性，而不是替换整个状态对象。

this.setState({
    //legend: opts;
    newState
  });

改为：

this.setState(newState)

 var Labels = ["2010", "2011", "2012", "2013", "2014", "2015", "2016"];
 var Datas = [65, 59, 80, 81, 56, 55, 69];


const data = {
  labels: Labels
  datasets: [{
    data: Datas,
    backgroundColor: [
    '#FF6384',
    '#36A2EB',
    '#FFCE56'
    ],
    hoverBackgroundColor: [
    '#FF6384',
    '#36A2EB',
    '#FFCE56'
    ]
  }]
};

const legendOpts = {
  display: true,
  position: 'top',
  fullWidth: true,
  reverse: false,
  labels: {
    fontColor: 'rgb(255, 99, 132)'
  }
};

export default React.createClass({
  displayName: 'LegendExample',

  componentWillMount(){
    this.setState(data);
  },

  getInitialState() {
    return {
      legend: legendOpts,
    }
  },


  changeData() {
    const { value } = this.legendOptsInput;
    var oldDataSet = this.state.datasets[0];
    var newData = [65, 59, 80, 81, 56, 55, 69];
    var newDataSet = {
      ...oldDataSet
    };

    newDataSet.data = newData;
    console.log('this is:', newDataSet.data);

    var newState = {
      ...data,
      datasets: [newDataSet]
    };
    try {
      const opts = JSON.parse(value);
      this.setState(newState);
    } catch(e) {
      alert(e.message);
      throw Error(e);
    }
  },

  render() {
    return (
      <div>
        <h2>Example</h2>
        <textarea
          cols="40"
          rows="15"
          ref={input => { this.legendOptsInput = input; }}
          defaultValue={JSON.stringify(this.state.legend, null, 2)}></textarea>
        <div>
          <button onClick={this.changeData}>Change data!</button>
        </div>
        <Line data={this.state} legend={this.state.legend} redraw />
      </div>
    );
  }
})