跳到主內容

【React Admin】定時refresh

React Admin 是一個基於 React 框架的開源後台管理界面框架。若要定時刷新 React Admin 的數據,可以使用 React 的 useEffect 鉤子來定時刷新。

以下是一個示例代碼:

import React, { useState, useEffect } from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const App = () => {
  const [refreshInterval, setRefreshInterval] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setRefreshInterval(prevRefreshInterval => prevRefreshInterval + 1);
    }, 10000); // 10 秒刷新一次

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="posts" list={ListGuesser} refresh={refreshInterval} />
    </Admin>
  );
};

export default App;

在這個示例中,我們使用 useState 鉤子來保存刷新間隔時間,然後使用 useEffect 鉤子來啟動定時器,每10秒刷新一次。我們還在 Resource 中傳遞了 refreshInterval,它將在 useState 中更新,這樣它會觸發 Resource 的重新加載。

需要注意的是,經常性的刷新會增加服務器負載,並且可能會降低應用程序的性能。因此,應該謹慎使用定時刷新,並根據實際需要進行調整。