Question

我知道这个问题有几种形式，但是没有人提供任何解决方案。所以我要面对的是react-chartjs-2折线图未随组件状态更新这是代码

import React, { Component } from 'react';
import { Line, Chart } from "react-chartjs-2"
import { ipcRenderer } from "electron"


class Network extends Component {
    state = {
        data : {
            networkUpload : [0, 0, 0, 0, 0],
            networkDownlaod : [0, 0, 0, 0, 0]
        }
      }

  constructor(props){
    super(props);
    ipcRenderer.send("get-dynNet-data")
  }


  componentDidMount(){    
    let data = {...this.state.data};
    ipcRenderer.on('network-data', (e, newData)=>{
        data.networkUpload.splice(0, 1);
        data.networkUpload.push(newData.networkUpload);
        data.networkDownlaod.splice(0, 1)
        data.networkDownlaod.push(newData.networkDownlaod);
        this.setState({data});
    });
  }

  componentWillUnmount(){
    ipcRenderer.removeAllListeners();
  }

  // Decide Weather to show transfer rate in KBPS (kilobytes per sec) or MBPS (megabytes per sec)
  transferRate (dataRate){
    let lastData = dataRate[dataRate.length - 1];
    if(lastData > 1024){
      let mbps = lastData / 1024;
      return `${mbps} Mbps`;
    }else{
      return `${lastData} Kbps`;
    }
  }




  render() {
  //  Data for Line Chart "data" props  
  let options = {
      labels : ["5 sec", "4 sec", "3 sec", "2 sec", "1 sec"],
      datasets:[{
        label : "Download",
        backgroundColor : 'rgba(255, 99, 132, 1)',
        data : this.state.data.networkDownlaod,
        fill : false
      },
    {
        label : "Upload",
        backgroundColor : 'rgba(255, 205, 86, 1)',
        data : this.state.data.networkUpload,
        fill : false
    }],


    }

    // Static data for LineChart "option" props
    let axisOptions = {
      scales: {
        yAxes: [{
            display: true,
            ticks: {
                // suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                suggestedMax: 10,
                // OR //
                beginAtZero: true,   // minimum value will be 0.

            }
        }]
    },
    maintainAspectRatio: false
    }

  // Legend Visibility
  let legend = {
    display: true
  }

    return (
      <div>
        <h3 className="text-grey text-center">NETWORK USAGE</h3>
        <Line width={5} height={150} data={options} legend={legend} className="network-chart" options={axisOptions} />
        <h6 className="net-upload text-grey clearfix">Upload : {this.transferRate(this.state.data.networkUpload)}</h6>
        <h6 className="net-download text-grey">Download : {this.transferRate(this.state.data.networkDownlaod)}</h6>
      </div>
    );
  }
}

export default Network;

除“折线图”外，所有其他类型的图表均处于状态更新良好在图表组件上使用key = {Math.random（）}可以工作，但与其更新图表，不如重新渲染整个折线图，这不是我想要的。任何机构都可以解决问题吗

Answer 1

所以我通过在本地变量链接中传递折线图的"ref"属性来解决此问题

<Line ref={ref => this.chartRefernece = ref} width={500} height={150} data={options} legend={legend} className="network-chart" options={axisOptions} />

并更新简单的this.chartRefernece.chartInstance.update();来更新图表：）

react-chartjs-2折线图未更新为State

1 个答案: