如何在Reactjs中更新Chartjs？

Question

我正在使用react钩子使用chartjs创建图表。在socket.io的帮助下，Web应用程序正在从Node.js服务器接收数据。数据已成功添加到温度和时间数组，但是不幸的是，每次有新数据出现时，我都无法更新图表。

import React,{useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
import {Line} from 'react-chartjs-2';
import io from 'socket.io-client'
const socket = io('http://localhost:5000');

function App() {
  const [chartData, setChartData] = useState({});
  const [dataReact, setData] = useState({});
  var temp =[];
  var time = [];
  const chart = ()=>{
    setChartData({
      labels: time,
        datasets: [{
            label: '# of Votes',
            data: temp,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    })
  }

  useEffect(()=>{
    socket.on('data1', res => {

      console.log(res);
      temp.push(res.IotData.temperature);
      time.push(res.MessageDate);
      });
    chart();

  },[])

  return (
    <div className="App">
      <Line data={chartData}/>
    </div>
  );
}

export default App;

Answer 1

In useEffect（）具有第二个参数（即[]），它是在无状态组件范围内要观察的属性数组。只要更新其中任何一个，该功能就会再次执行。因此，将图表添加到空数组中。