定期为 Dashboard API 调用运行 useEffect

Posted 2023-03-17

【中文标题】定期为 Dashboard API 调用运行 useEffect

【英文标题】：Periodically run useEffect for Dashboard API call

【发布时间】：2021-12-31 02:29:46

【问题描述】：

我希望定期调用 API 并返回要在页面上显示的响应。此 API 用于获取 Azure 队列上的消息计数，然后将其显示在我的仪表板上。

我尝试了很多选项，但似乎无法正常工作。我正在使用 setIntervalAsync 定期调用 API，但目前它只返回 undefined 一次。以下是用于进行调用的代码：

export function Something() 
useEffect(() => 
  setInterval(() => 
  getProperties().then(data => return data.Count), 1000);
, [])

对此的任何帮助将不胜感激

更新： 使用下面的更新代码，我现在会定期收到电话，但似乎无法显示。

export const Queue = () => 
  const [count, setCount] = useState()

  useEffect(() => 
    const h = setIntervalAsync(() => 
      getProperties().then(data => 
        setCount(data.Count)
        console.log("First: " + count)
      )
    , 1000)
    console.log("Second: " + count)

    return () =>  clearInterval(h) 
  , [count])
  console.log("Third: " + count)

  return <div>count</div>

这里是我调用函数的地方：

export let Content = () => 
  let count = Queue()
  console.log(count)
  return (
    <div className="grid">
      <h1 className="title">Queues</h1>
      <div className="row">
        <div className="column">
          <h3>count</h3>
          <h2 id='Count'>count</h2>
        </div>
      </div>
    </div>
  );
;

这是控制台日志返回的屏幕截图：

如您所见，它在 useEffect 中定期调用，但不会定期到达外部，只有一次

【问题讨论】：

不返回。而是更新状态

Queue 是一个组件，就像h2 一样。所以要包括它，把它写成<Queue />，而不是const a = Queue。

嗯，好的，谢谢，但是当计数发生变化时会更新吗？？

是的，这就是 React 的设计方式。只要调用Queue中的useState，它就会更新组件。

【参考方案1】：

我认为你调用间隔是对的，但是要求 React 做事情，你需要通知它。假设你把这些东西放在App.

  const App = () => 
    const [count, setCount] = useState(-1)

    useEffect(() => 
      const h = setInterval(() => 
        getProperties().then(data => 
          // trigger an update to screen
          setCount(data.Count)
        )
      , 1000)

      // clean interval upon dismount
      return () =>  clearInterval(h) 

    , [])

    // this is for you to see the work
    return <div>count</div>
  

我在你的工作之上添加了两件事：

setCount 用于将您的逻辑与更新联系起来 useEffect 返回一个销毁函数来清理东西