定期运行对 Dashboard API 调用 useEffect

Question

我希望定期调用 API 和 return 响应以显示在页面上。 API 是获取 Azure 队列上的消息计数，然后将其显示在我的仪表板上。

我尝试了很多选项，但似乎无法正常工作。我正在使用 setIntervalAsync 定期调用 API 但目前它只是 returning 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>
  );
};

这是控制台日志中 return 的屏幕截图：

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

Answer 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 returns 清理东西的销毁函数

定期运行对 Dashboard API 调用 useEffect

Periodically run useEffect for Dashboard API call

javascript

setinterval

reactjs

use-effect

定期 运行 对 Dashboard API 调用 useEffect

Periodically run useEffect for Dashboard API call

javascript

setinterval

reactjs

use-effect

定期运行对 Dashboard API 调用 useEffect