0

Pido disculpas si esta pregunta ya se hizo, es una pregunta simple o para principiantes. La realidad es que busqué en todos lados y no encontré la respuesta. Lo que quiero hacer es renderizar un componente, al que llamé Slider solo porque no se me occurrió otra cosa, que contiene una imagen con información. Lo que quiero hacer es que esa imagen y la información cambien cada 3 segundos, tomando los datos de un arreglo de objetos con los elementos que voy a mostrar. Lo que sucede cuando corro start es que se vuelve loco y no espera los 3 segundos y la imagen y la informacion cambian todo el tiempo cada vez mas rapido. Se que es una pregunta de principiantes pero, alguien me puede ayudar o darme algún tip? Gracias !!

import './Slider.scss';
import '../../global/globalStyles.scss';
import image1 from '../../images/5.jpg';
import image2 from '../../images/6.jpg';
import image3 from '../../images/7.jpg';
import image4 from '../../images/8.jpg';



export default function Slider () {
    //El arreglo de objetos, donde cada objeto tiene la imagen y la información de la misma
    const images = [
        {
            src: image1,
            title: 'Lorem Ipsum',
            subtitle: 'Productos',
            text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
            alt: 'Mesa de café'
        },
        {
            src: image2,
            title: 'Lorem Ipsum 2',
            subtitle: 'Productos 2',
            text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.',
            alt: 'Mesas y sillas en comedor'
        },
        {
            src: image3,
            title: 'Lorem Ipsum 3',
            subtitle: 'Productos 3',
            text: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.',
            alt: 'Televisión y mueble'
        },
        {
            src: image4,
            title: 'Lorem Ipsum 4',
            subtitle: 'Productos 4',
            text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.",
            alt: 'Sillón esquinero'
        }
    ];
    // Primero hice un estado de react asignándole la posición 0 de mi arreglo de objetos 
    const [image, setImage] = useState(images[0]);

   // Luego utilicé useRef para la referencia a los elementos que voy a cambiar,
   // asignándole la propiedad correspondiente para cada referencia, por ejemplo,
   // para las imagenes utilicé el estado actual en la posición src --> image.src
    const imageRef = useRef(image.src);
    const titleRef = useRef(image.title);
    const subtitleRef = useRef(image.subtitle);
    const textRef = useRef(image.text);
    const altRef = useRef(image.alt);

    // Hice una función timer que tiene una variable 'n' con valor en 0. Luego utilicé un setInterval, 
//con una función que va incrementando 'n' hasta llegar al largo de mi arreglo de objetos,
// y dentro de la función utilizo imageChange pasandole como argumento la variable 'n',
// mas abajo se explica que hace esta función. Todo esto cada 3 segundos.
    function timer () {
        var n = 0;
        setInterval(()=>{
            if(n > images.length - 1) {
                n = 0;
            };
            imageChange(n);
            n++;
        },3000)
    }

    // imageChange recibe un argumento, que va a ser la variable declarada mas arriba, y lo que hace es
// primero setear el estado 'image' con el objeto en la posición que recibe como argumento,
// dentro de mi arreglo de objetos 'images'. Luego utilizo mis referencias para cambiar el valor
// de las mismas con mi estado.
    function imageChange(n) {
        setImage(images[n]);
        imageRef.current = image.src;
        titleRef.current = image.title;
        subtitleRef.current = image.subtitle;
        textRef.current = image.text;
        altRef.current = image.alt;
    }

    // Utilizo useEffect para ejecutar timer()
    useEffect(()=> {
        timer();
        return clearInterval(timer)
    })

    return (
        <div className='grid-main-area slider'>
            <div className='text'>
                <header>
                    <p id='slider-subtitle' className='separator'>{ subtitleRef.current }</p>
                    <h2 id='slider-title'>{ titleRef.current }</h2>
                    <p id='slider-text'>{ textRef.current }</p>
                </header>
            </div>
            <div className='image'>
                <img id='slider-image' src={ imageRef.current } alt={ altRef.current } />
            </div>
        </div>
    )
}

2 respuestas 2

0

Lo mas probable es que esté loco porque el efecto se ejecuta en cada render, por lo tanto en cada render estás creando un timer de 3 segundos... Yo veo varios errores:

  1. La función timer no está devolviendo nada... y esa cancelInterval tampoco está haciendo mucho. Deberías declararlo así:
function timer () {
        var n = 0;
        return setInterval(()=>{  //Devolver el intervalId
            if(n > images.length - 1) {
                n = 0;
            };
            imageChange(n);
            n++;
        },3000)
    }
    

useEffect(()=> {
        const timerId = timer();
        return () => { clearInterval(timerId) } //UseEffect debería devolver una funcion de limpieza
    }, []) //Deberías pasar un array vacío al efecto para que no se ejecute en cada render sino solo cuando se monta y desmonta el componente

Tampoco entiendo mucho para que tienes que usar tantas referencias (useRef). Si ya tienes en el estado la imagen seleccionada, puedes usar simplemente image.src

0

hay varios detalles que debes cuidar:

Lo primero, es que debes considerar que el hook "useEfect" equivale a componentDidMount, componentDidUpdate y componentWillUnmount combinados. (https://es.reactjs.org/docs/hooks-effect.html), es decir, que cada vez que se cambia el estado del componente, cada vez que usas, "setImage" por ejemplo, el hook, "useEfect se vuelve a ejecutar, y en tu caso, vuelve a crear un nuevo setInterval, es decir, la primera vez entra, y crea el set interval de 3 segundos, a los 3 segundos, ejecuta el timer(), que asu vez ejecuta el "setImage", pum, ahi cambia el estado, y vuelve a crear un setinterval, ahora tienes dos setinterval, asi que se ejecutaran con un segundo de diferencia,aprox,y pasado dos segundos mas, vuelve a crear otro, y asi sucesivamente, hasta q tienes decenas de setinterval, ejcuntandose cada milisegundo, y se vuelve "loco" el componente, asi, que te aconsejo, tener presente eso cuando uses el useEfect, si no tienes experiencia en react, te aconsejo empezar usando componentes de clases son menos flexibles pero te permite entender los ciclos de vida un poco mas fácil, luego pasa a los componentes por funciones.

Esta es la explicacion de porque no te funciona, no la respuesta de como hacerlo, creo que poner solo la respuesta te haria un mal, es mejor que aprendas que esta mal primero.

ahora, si entiendo bien, si quieres que el componente renderize cada 3 segundos, algo distintido, de info en un array se puede hacer de varias formas, yo separaria en uno o dos componentes, pero para simplificarlo, seria algo asi.

import React, { Component } from "react";

class Slide extends Component {
  constructor(props) {
    super(props);
    //aca inicializamos el estado, con los componetnes del slide, y el indice en 0
    this.state = {
      indice_imagen: 0,
      imagenes: [
        {
          src: "image1",
          title: "Lorem Ipsum",
          subtitle: "Productos",
          text:
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
          alt: "Mesa de café"
        },
        {
          src: "image2",
          title: "Lorem Ipsum 2",
          subtitle: "Productos 2",
          text:
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.',
          alt: "Mesas y sillas en comedor"
        },
        {
          src: "image3",
          title: "Lorem Ipsum 3",
          subtitle: "Productos 3",
          text:
            "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
          alt: "Televisión y mueble"
        },
        {
          alt: "Sillon esquinero",
          src: "image4",
          title: "Lorem Ipsum 4",
          subtitle: "Productos 4",
          text:
            "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable."
        }
      ],
      id_interval: null
    };
  }
  // aca lanzamos el setInterval cuando va a cargar el componente

  componentDidMount() {
    //alamcenamos el id_interval para luego amtarlo cuando se mate el componente
    let id_interval = setInterval(() => {
      // aqui revisamos que caundo lelgue al final del arreglo se reinicie el indice
      if (this.state.indice_imagen === this.state.imagenes.length - 1) {
        this.setState({ indice_imagen: 0 });
      } else {
        this.setState({ indice_imagen: this.state.indice_imagen + 1 });
      }
    }, 3000);

    this.setState({ id_interval: id_interval });
  }
  componentWillUnmount() {
    //aqui matamos el setinterval para no envasurar nuestro dom
    clearInterval(this.state.id_interval);
  }

  render() {
    return (
      <>
        <div className="grid-main-area slider">
          <div className="text">
            <header>
              <p id="slider-subtitle" className="separator">
                {this.state.imagenes[this.state.indice_imagen].subtitle}
              </p>
              <h2 id="slider-title">
                {this.state.imagenes[this.state.indice_imagen].title}
              </h2>
              <p id="slider-text">
                {this.state.imagenes[this.state.indice_imagen].text}
              </p>
            </header>
          </div>
          <div className="image">
            <img
              id="slider-image"
              src={this.state.imagenes[this.state.indice_imagen].src}
              alt={this.state.imagenes[this.state.indice_imagen].alt}
            />
          </div>
        </div>
      </>
    );
  }
}

export default Slide;

te dejo por aqui el codesandbox https://codesandbox.io/s/slide-react-automatico-26u16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.