Javascript 使用ReactJS+；ChartJS+；上海证券交易所

我正在尝试构建reactjs应用程序。在这个应用程序中，我想使用chartjs通过订阅服务器发送事件（SSE）来显示折线图

当有来自SSE的新消息时，我想更新折线图。为此，我开发了以下代码，但当出现新消息时，图表不会更新。我正在控制台中打印新的消息值，我可以看到这些消息。但我的图表并没有实时更新

例如，如果有来自SSE的新消息，则需要更新图表

当我最小化浏览器并按浏览器最大化时，图表将使用拉取的消息值进行更新。 一旦客户端连接到我的服务器，SSE就会发出

请在这里找到截图

这是密码

let xAxis =[];
let yAxis=[];
class LineChartComponent extends Component
{
   constructor(props) {     
    super(props);
    this.state ={
      data: []
     } 
     this.eventSource = new EventSource('http://mydomainname:8090/kafka-messages');    
   }
  componentWillMount() {
    this.eventSource.onmessage = (e) => this.updateChart(JSON.parse(e.data));   
  }

  updateChart(message){
    let trgTS =message.TrgTS;
    let value =parseFloat(100.0*message.Attributes[0].V/message.Attributes[1].V).toFixed(2);
      xAxis.push(trgTS);
      yAxis.push(value)
      console.log(trgTS,value); // I can see the new messages values in console 
      this.setState(Object.assign({}, {
        data: {
          labels:  xAxis,
          datasets:[
             {
                label:'cycle time',
                data: yAxis ,
                fill: false,
                borderColor: "#3cba9f"
              }
          ]
        }
      }));      
  }
   render()
   {
      return(
         <div>
            <Line data = {this.state.data} options = {{ maintainAspectRatio: false }} />
         </div>
      )
   }
}

让xAxis=[]；
设yAxis=[]；
类LineChartComponent扩展组件
{
构造器（道具）{
超级（道具）；
这个州={
数据：[]
} 
this.eventSource=新的eventSource（'http://mydomainname:8090/kafka-讯息);；
}
组件willmount（）{
this.eventSource.onmessage=（e）=>this.updateChart（JSON.parse（e.data））；
}
updateChart（消息）{
设trgTS=message.trgTS；
让value=parseFloat（100.0*message.Attributes[0].V/message.Attributes[1].V）.toFixed（2）；
X轴推力（trgTS）；
yAxis.push（值）
log（trgTS，value）；//我可以在控制台中看到新消息值
this.setState（Object.assign（{}）{
数据：{
标签：xAxis，
数据集：[
{
标签：'循环时间'，
资料来源：yAxis，
填充：假，
边框颜色：“3cba9f”
}
]
}
}));      
}
render（）
{
返回(
)
}
}

我在angular6应用程序中遇到了同样的问题，我通过使用图表更新方法手动更新图表解决了这个问题。不确定如何在React中执行此操作，但您可以使用类似以下内容：

this.chart.update（）感谢您的评论。我对Angular 6没有问题，即使您不需要更新这个.chart.update（）。当范围变量中有新数据时，图表将自动刷新。我试图找到与ReactJS相同的解决方案。