定期更新 span 中的值

Question

React/JS这里是新手

我有一个简单的 React 应用程序，页面从 ItemCounter API-Gateway 获取一个数字。该代码现在可以正常工作，它能够从 lambda/apig url.

中获取一个值

import React, { useState, useEffect } from "react";

const Stats = () => {
  const [ItemsSupplied, setItemsSupplied] = useState(0);
  
  useEffect(async () => {
    signIn();
  }, []);

  async function signIn() {
    // Async Signin functions and calls, followed by getData() call
    getData();
  }

  async function getData() {
    let url = "https://re1szvliqk.execute-api.us-east-2.amazonaws.com/ItemCounter";
    const response = await fetch(url);
    const number = await response.json();
    setItemsSupplied(number);
  }
  return (
    <div>
        <span> Items Supplied: {ItemsSupplied} </span>
    </div>
  );
};

export default Stats;

我正在寻找一种方法来定期 refresh/update 这个值，比方说每 5 秒一次，但无法弄清楚。

试过这个：，但无法将其与我的页面合并，运行出现错误。错误与以下事实有关 signIn()，因此 getData() 已经在 useEffect().

中被调用

希望有人能帮帮我，谢谢！

Answer 1

您需要再添加一个useEffect，其中您需要设置每5秒的时间间隔。

import React, { useState, useEffect } from "react";

const Stats = () => {
  const [ItemsSupplied, setItemsSupplied] = useState(0);
  
  useEffect(() => {
    signIn();
  }, []);

  useEffect(() => {
    let timer = setInterval(()=>getData(),5000)
    return ()=>clearInterval(timer)
  },[ItemsSupplied]);

  async function signIn() {
    // Async Signin functions and calls, followed by getData() call
    getData();
  }

  async function getData() {
    let url = "https://re1szvliqk.execute-api.us-east-2.amazonaws.com/ItemCounter";
    const response = await fetch(url);
    const number = await response.json();
    setItemsSupplied(number);
  }
  return (
    <div>
        <span> Items Supplied: {ItemsSupplied} </span>
    </div>
  );
};

export default Stats;

定期更新 span 中的值

Update value in span periodically

javascript

reactjs

web