React / Chart.js用按鈕更改數據

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> ); } })