Estoy buscando llamar periódicamente a una API y devolver la respuesta para que se muestre en la página. Esta API es para obtener el recuento de mensajes en una cola de Azure y luego mostrarlo en mi tablero.
He intentado muchas opciones, pero parece que no puedo hacer que funcione. Estoy usando setIntervalAsync para llamar periódicamente a la API, pero actualmente solo regresa indefinido una vez. A continuación se muestra el código utilizado para realizar la llamada:
export function Something() { useEffect(() => { setInterval(() => getProperties().then(data => {return data.Count}), 1000); }, [])}Cualquier ayuda en esto será muy apreciada.
ACTUALIZACIÓN: Usando el código actualizado a continuación, ahora recibo la llamada periódicamente, pero parece que no puedo acceder a la pantalla.
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> }Aquí es donde llamo a la función:
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> ); };Aquí hay una captura de pantalla de lo que se devuelve de los registros de la consola:
Como puede ver, se llama periódicamente dentro del useEffect pero no llega al exterior periódicamente, solo una vez
Creo que llamas al intervalo correcto, sin embargo, para pedirle a React que haga cosas, debes notificarlo. Suponiendo que pongas estas cosas en 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> }Agregué dos cosas además de tu trabajo:
setCount se usa para conectar su lógica con una actualizaciónuseEffect devuelve una función de destrucción para limpiar cosas