Novato de React/JS aquí.
Tengo una aplicación de reacción simple con la página que obtiene un número de ItemCounter API-Gateway. El código funciona en este momento y puede obtener un valor de la url lambda/apig.
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;Estoy buscando una manera de actualizar/actualizar este valor periódicamente, digamos cada 5 segundos, pero no pude resolverlo.
Intenté esto: cambiar el texto cada 3 segundos React useEffect , pero no pude fusionar esto con mi página y encontré errores. Los errores tenían algo que ver con el hecho de que signIn() y, en consecuencia, getData() ya se están llamando en un useEffect() .
Esperando que alguien pueda ayudarme, ¡Gracias!
Debe agregar un useEffect más dentro del cual debe establecer un intervalo para cada 5 segundos.
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;