Как обновить график js в Reactjs?

Question

Я использую реагирующие хуки для создания графика, используя график js. С помощью socket.io веб-приложение получает данные с сервера nodejs. Данные успешно добавляются в массив временных и временных данных, но, к сожалению, я не могу обновлять диаграмму каждый раз, когда поступают новые данные.

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

В useEffect () второй параметр (т. Е. []), Который представляет собой массив свойств, наблюдаемых в области действия компонента без состояния. Всякий раз, когда любой из них обновляется, функция выполняется снова. Так что добавьте диаграмму в пустой массив.