如何每X秒刷新一次React-Admin列表数据?

问题描述 投票:0回答:1

cache documentation提到我可以向数据提供者添加代理,以便将响应缓存X秒钟,而不是由React-Admin在每次页面更改时刷新它们。但是,对于我的用例(一个股票交易应用程序),我希望每1秒从我的API获取我的listview的新数据。我原本希望通过使用上面的缓存方法来做到这一点,但是看起来如果用户在页面上时缓存过期,页面将不会自动刷新。

如何获得我的React-Admin列表视图以每X秒刷新一次,或者在缓存过期时自动刷新?

reactjs react-redux react-admin
1个回答
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>
      )
    }    
© www.soinside.com 2019 - 2024. All rights reserved.