Usando Reaccionar.
Si tuviera una matriz como:
[ data: title: foo1 body: bar1 title: foo2 body: bar2 title: foo3 body: bar3 ] Y quería mostrar un solo body y title a la vez en mi página y recorrer estos elementos (tener un párrafo que cambia su contenido de forma rutinaria).
Hasta ahora especifico qué datos quiero usando esto:
let specificBody = this.state.data[x].body; //loop through different elements of array on timer let specificTitle = this.state.data[x].title; let specificPosted_By = this.state.data[x].posted_by;¿Hay alguna forma de incrementar el valor de x para poder mostrar un cuerpo y un título diferentes? ¿O hay otra forma de lograr este objetivo?
Toda ayuda muy apreciada.
Algún pseudocódigo, no probado:
const [index, setIndex] = useState(0) useEffect(() => { const interval = setInterval(() => { /*todo reset at max value*/ setIndex(index+1) }, 10000) return () => clearInterval(interval) },[])y luego use el índice aquí:
this.state.data[index].body;Este es un ejemplo de cómo puede usar setInterval para actualizar el índice activo periódicamente.
Su render luego mostrará el texto del objeto activo en la matriz.
const data = [{ title, body },{ title, body }, { title, body }] const Component = () => { const [active, setActive] = useState(0); useEffect(() => { //This is how you use setInterval to change the active index every 5 seconds setInterval(() => { setActive( previous => { if (previous === data.length) { return 0; } else { return previous+1; } }) }, 5000) //Change every 10 seconds },[]) return <div>{data[0].title}</div> }Parece que estás tratando de lograr dos cosas:
El fragmento de código no muestra qué lógica de bucle está utilizando, pero suponiendo que va a implementar un setInterval dentro de un enlace useEffect, desea crear una variable de estado independiente para 'x' (que marca el índice de matriz en su objeto de datos).
Luego puede establecer un condicional dentro del enlace useEffect, así:
useEffect(() => { const intervalId = setInterval(() => { if(x <= data.length-1) { setData(data[x]) } else { setState({ x = 0; }) }; x++; }, 5000); return () => clearInterval(intervalId); }, [data, x])