在 React 上更新间隔图

Question

我正在从我的数据库中获取数据以将其显示在图表上。目前，我必须刷新页面才能更新图表。我想以 x 间隔刷新图表，因为我的数据将以 x 间隔插入。我正在使用 ant design 来绘制图形。我正在使用 'home' 来显示我的图表，并使用另一个 class 来获取数据。

Home.js

export class Home extends Component {
  static displayName = Home.name;

  render () {
    return (
      <div>
        <h1>Dashboard</h1>
        <h2>
        <div className="site-card-wrapper">
    
      Graph1
      <Graph />}

  </div>
        </h2>
      </div>
    );
  }
}

Temp.js

const TempGraph = () => {

 const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
      fetch('link')
      .then((response) => response.json())
      .then((json) => setDatajson))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
    const config = {
        data,
        xField: 'time',
        yField: 'value',
        seriesField:'location',
        xAxis: {
          title: {
          text: 'Hours',
          }
        },
        yAxis:{
            title:{
            text: 'Temperature in °',
          }
        },
        
        meta: {
          time: {
            alias: 'hours',
    
          },
          value: {
            alias: 'temperature',
            max: 50,
          },
        },
    
      };
     return <Line {...config} />;
}
export default TempGraph;

Answer 1

您可以在 useEffect 中添加一个 setInterval 来获取数据并再次更新它们。不要忘记在 return:

上清除间隔

useEffect(() => {
   const interval = setInterval(() => asyncFetch(), 5000)
   return () => clearInterval(interval)
}, []}

本例每5000ms触发一次，根据需要更改值。

在 React 上更新间隔图

Updating Graph on Interval on React

graph

reactjs

antd

ant-design-pro