Probablemente sea algo básico, pero estoy tratando de averiguar cómo puedo cambiar las diapositivas haciendo clic en el botón. Tengo divs con datos de la API de películas, así que hago clic en un botón y cambio las diapositivas, alternando la clase activa en él. Puedo imaginar hacerlo en javascript simple, pero estoy tratando de entender cómo puedo hacerlo en React. La función se ve así:
const [currentSlide, setCurrentSlide] = useState(0); function changeSlide(){ if(currentSlide <= few_movies.length){ setCurrentSlide(currentSlide + 1); }else if(currentSlide >= few_movies.length){ } } Así que aquí, si currentSlide es menor que la longitud de la matriz de películas, configuro currentSlide a la siguiente. Pero estoy tratando de averiguar qué podría hacer si currentSlide llega a un punto final. Intenté hacer setCurrentslide(0) para que comience nuevamente desde la primera diapositiva, pero realmente no tiene sentido. Código para la diapositiva div:
<div className={`poster__item ${currentSlide===key ? 'active' : ''}`}</div>Editar: así que agregué useInterval para que recorriera automáticamente los movimientos, pero ahora solo cambia de un lado a otro entre los dos primeros elementos sin ir más allá. El código se ve así:
useEffect(() =>{ setInterval(() =>{ if(currentSlide < few_movies.length - 1){ setCurrentSlide(currentSlide + 1); }else(currentSlide >= few_movies.length){ setCurrentSlide(0); } }, 2000) },[])El código actualizado que publicaste, con setInterval dentro del id de useEffect problemático porque currentSlide nunca cambiará dentro de él, ya que useEffect no tiene dependencias. Siempre permanecerá en 0 , el valor inicial.
Puede usar setTimeout en su lugar ( con el uso de la lista de dependencias de useEffect ), o puede usar el formulario de función que proporciona el valor actual y devuelve el nuevo.
así que tampoco
useEffect(() => { const timeout = setTimeout(() => { if (currentSlide < few_movies.length - 1) { setCurrentSlide(currentSlide + 1); } else { setCurrentSlide(0); } return () => clearTimeout(timeout); }, 2000); }, [currentSlide])o
useEffect(() => { const interval = setInterval(() => { setCurrentSlide((currentSlideValue) => { if (currentSlide < few_movies.length - 1) { return currentSlide + 1; } return 0; }) return () => clearInterval(interval); }, 2000); }, [])Respuesta rápida SÍ, puede hacer que las diapositivas cambien usando useState hook.
Le sugiero que mantenga todas las diapositivas (películas) en una matriz o que tenga algún valor indexado para ellas como id, y luego puede hacer los cálculos para cambiarlas según el índice de diapositiva actual. y al hacer clic, el evento debe incrementar o disminuir el índice si la diapositiva actual es, por ejemplo, 5 y desea ver la diapositiva anterior, simplemente debe establecer el valor del estado en actual: 1. Y esa es básicamente la lógica.
Para regresar (mostrar la diapositiva), solo observa qué datos de la API tienen la misma identificación (índice) que la diapositiva actual y solo muestra sus datos.
Espero que puedas entender y no haberte confundido. Buena suerte, feliz codificación.
en lugar de establecerlo en setCurrentslide(0) , ¿por qué no hacer nada?
lo mismo si están en el índice de diapositiva 0 , entonces no dejes que vayan más abajo de 0
currentSlide.length >= few_movies.length ? console.log('do nothing') : setCurrentSlide(oldState => oldState +1)