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