react chartjs中的数据更改后图表未更新

Question

我用react chartjs做了一个折线图。图表工作得很好，但是当我尝试更新图表时，它没有更新。虽然我可以更改图表的数据。请帮帮忙。我尝试在单击图例时更新图表。我看了一些教程，发现like更新功能会对我有帮助。但是，当我在我的代码行中尝试更新函数时，它显示了一个错误：“未定义的更新函数”。

import React from 'react';

import {Line} from 'react-chartjs-2';


const checkinsData={
    labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
    datasets:[
        {
        label:"Day",
        backgroundColor:"blue",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        data:[4,5,6,7,8,9,10,11,12,1,2,3,4]

        }


    ]
}



class CheckinGraph extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={

        }
    }

    legendClick=function() {
        console.log("Legend click"+ checkinsData.labels);
        checkinsData.datasets.data=[100,120,200,25,56,78,80,90,70,100];
    }
    render()
    {
        return(
            <div className="col-md-12  default-shadow bg-white pd-30-0 border-radius-10 align-center">
            <Line
            redraw
        data={checkinsData}
        options={
            {
                title:{
                    text:'Total Check-ins',
                    fontSize:20,
                    display:true
                },
                legend:{
                    display:true,
                    position:'top',
                    onClick:this.legendClick
                }
            }
        }
        />
            </div>

        )
    }
}

export default CheckinGraph;

Answer 1

当您的组件获得新属性或状态将更新时，您的图表将更新/重新呈现。由于您正在更新的图表数据没有处于组件的状态，因此组件不知道更改，也不会重新呈现您的图表。你需要告诉组件有些东西已经改变了，现在是时候重新渲染了。这可以通过以下方式实现: 1.在状态中添加数据，然后在点击时以正确的方式更新数据(不会改变状态) 2.在状态中添加一个随机密钥，并在更新非状态数据后更新状态密钥

​

state = { key: Date.now() }


legendClick=function() {
        console.log("Legend click"+ checkinsData.labels);
        checkinsData.datasets[0].data=[100,120,200,25,56,78,80,90,70,100];
        this.setState({ key: Date.now() });
    }

​