Estoy tratando de implementar una presentación de diapositivas de imágenes. setInterval se usa dentro de useEffect para cambiar la imagen después de x segundos. El estado de imagen actual mantiene la imagen actual y después de x segundos cambiará a la siguiente imagen, pero la reacción me dice que la variable de índice se perderá después de cada procesamiento.
const images = [one, two, three, four, five, six, seven]; const [currentImage, setCurrentImage] = React.useState(); let index = 0; useEffect(() => { setInterval(() => { if (index < images.length) { setCurrentImage(images[index]); index++; console.log(images[index]); } else { index = 0; // If so, reset the index } }, 5000); }, []); <Grid item xs={false} sm={4} md={7} sx={{ backgroundImage: `url(${currentImage})`, backgroundRepeat: "no-repeat", backgroundSize: "cover", backgroundPosition: "center", }} ></Grid>Las asignaciones a la variable 'índice' desde dentro de React Hook React.useEffect se perderán después de cada procesamiento. Para conservar el valor a lo largo del tiempo, guárdelo en un useRef Hook y mantenga el valor mutable en la propiedad '.current'. De lo contrario, puede mover esta variable directamente dentro de React.useEffect
Simplemente use useState para cambiar el índice y recuerde borrar el temporizador.
const images = [one, two, three, four, five, six, seven]; const [currentImage, setCurrentImage] = React.useState(); const [index,setIndex] = useState(0) useEffect(() => { let timer = setInterval(() => { if (index < images.length) { setCurrentImage(images[index]); setIndex(prev=>prev+1) console.log(images[index]); } else { setIndex(0) // If so, reset the index } }, 5000); return () => { clearTimeout(timer) } }, []); <Grid item xs={false} sm={4} md={7} sx={{ backgroundImage: `url(${currentImage})`, backgroundRepeat: "no-repeat", backgroundSize: "cover", backgroundPosition: "center", }} ></Grid>También puedes hacer esto:
const images = [one, two, three, four, five, six, seven]; const [index,setIndex] = useState(0) useEffect(() => { let timer = setInterval(() => { if (index < images.length) { setIndex(prev=>prev+1) console.log(images[index]); } else { setIndex(0) // If so, reset the index } }, 5000); return () => { clearTimeout(timer) } }, []); <Grid item xs={false} sm={4} md={7} sx={{ backgroundImage: `url(${images[index]})`, backgroundRepeat: "no-repeat", backgroundSize: "cover", backgroundPosition: "center", }} ></Grid>Use setTimeout y agregue el índice en la matriz de dependencias de su useEffect. En ese setTimeout, actualizará su index. Pero no almacene su índice como una variable, guárdelo en el estado.