React chart.js 動態數據更新不渲染

Question

我正在使用chart.js構建動態圖表。

在componentDidMount 中，我每秒鍾都使用setInterval 調用getNewData()。

這會更新我的數據集中的數據，由於某種原因，當 state 更新時，圖表不會更新/重新渲染。

添加新數據時，如何讓圖表更新其點？

組件代碼：

import React, {Component} from 'react';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-lineheight-annotation';

import './styles.scss';

export default class SmallCard extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: {
                labels: ["1", "2", "3", "4", "5"],
                datasets: [
                    {
                        label: "Videos Made",
                        backgroundColor: "rgba(255, 0, 255, 0.75)",
                        data: [4, 5, 1, 10, 32, 2, 12]
                     },
                    {
                        label: "Subscriptions",
                        backgroundColor: "rgba(0, 255, 0, 0.75)",
                        data: [14, 15, 21, 0, 12, 24, 32]
                    }
                ]
            }
        }
    }

    componentDidMount() {
        this.interval = setInterval(() => this.getNewData(), 1000);
    }

    componentWillUnmount() {
      clearInterval(this.interval);
    }

    getNewData() {
        const min = 1;
        const max = 10;
        const rand = min + Math.floor(Math.random() * (max - min));
        this.setState({
            data: {
                datasets: this.state.data.datasets.map((item, index) => ({
                    ...item,
                    data: [...this.state.data.datasets[index].data, rand]
                }))
            }
        });
    }


    setGradientColour = (canvas, colour) => {
        const ctx = canvas.getContext('2d');
        //console.log("ctx", ctx)
        const gradient = ctx.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, colour);
        gradient.addColorStop(0.95, "rgba(133, 255, 144, 0.85");
        return gradient;
    }

    getChartData = canvas => {
        const { data } = this.state;


        if(data.datasets) {
            let colors = ["rgba(255, 0, 255, 0.75)", "rgba(0, 255, 0, 0.75)"];
            data.datasets.forEach((set, i) => {
                set.backgroundColor = this.setGradientColour(canvas, colors[i]);
                set.borderColor = "white";
                set.borderWidth = 2;

            })
        }

        return data;
    }

    render() {
        const data  = this.state.data.datasets[1].data; 

        console.log("data", data)
        return (
            <div className="small-card-wrap">
                <Line 
                    options={{
                        responsive: true,
                        lineHeightAnnotation: {
                            always: false,
                            hover: true,
                            color: 'white',
                            noDash: true
                        }
                    }} 
                    data={this.getChartData} />
            </div>
        )
    }
}

Answer 1

getNewData未綁定到 class 上下文，因此setState將失敗。 您可以使用箭頭 function 因此它將繼承封閉的箭頭。

getNewData = () => {
        const min = 1;
        const max = 10;
        const rand = min + Math.floor(Math.random() * (max - min));
        this.setState({
            data: {
                datasets: this.state.data.datasets.map((item, index) => ({
                    ...item,
                    data: [...this.state.data.datasets[index].data, rand]
                }))
            }
        });
    }