【问题标题】:How to refresh the React-Admin list data every X seconds?如何每 X 秒刷新一次 React-Admin 列表数据?
【发布时间】:2020-08-07 11:45:51
【问题描述】:
cache documentation 提到我可以向 dataprovider 添加代理,以便我的响应被缓存 X 秒,而不是 React-Admin 在每次页面更改时刷新它们。但是,对于我的用例(股票交易应用程序),我想每 1 秒从我的 API 中为我的列表视图获取新数据。我希望通过使用上述缓存方法来做到这一点,但看起来如果缓存在用户在页面上过期时,页面不会自动刷新。
如何让我的 React-Admin 列表视图每隔 X 秒刷新一次,或者在缓存到期时自动刷新?
【问题讨论】:
标签:
reactjs
react-redux
react-admin
【解决方案1】:
要定期更新列表视图,您可以使用:来自 React-Admin 的useRefresh() 和来自此处的useRecursiveTimeout():
https://www.aaron-powell.com/posts/2019-09-23-recursive-settimeout-with-react-hooks/
import React, { useEffect, useRef } from 'react';
import { List, useRefresh } from 'react-admin';
function useRecursiveTimeout(callback, delay) {
const savedCallback = useRef(callback)
useEffect(() => {
savedCallback.current = callback
}, [callback])
useEffect(() => {
let id
function tick() {
const ret = savedCallback.current()
if (ret instanceof Promise) {
ret.then(() => {
if (delay !== null) {
id = setTimeout(tick, delay)
}
})
} else {
if (delay !== null) {
id = setTimeout(tick, delay)
}
}
}
if (delay !== null) {
id = setTimeout(tick, delay)
return () => id && clearTimeout(id)
}
}, [delay])
}
const MyList = (props) => {
const refresh = useRefresh()
useRecursiveTimeout(() => refresh(), 1000)
return (
<List>
...
</List>
)
}