2

tengo un proyecto que me tira el error muy ocasionalmente, ya le puse un renderizado condicional en el html manejado por el "state" y que no se muestre hasta que este renderizado, y que no me de el error de null o undefined en la Ref pero igual, con el useEffect lo que hago es cambiar el estado y que actualice el dom pero nada

const [state, setstate] = useState(false);
const imagenRef = useRef()
  const ref = useRef()
  let contador

  const temporizador = () => {
    const arregloImg = [capuccino, capuccinoCasero, frapuccino];
    let i = 0;

    contador = setInterval(() => {
      if (arregloImg.length - 1 > i) {
        imagenRef.current.className = 'claseActivaC'
        setTimeout(() => {
          imagenRef.current.className = 'claseActivaC active'
          setCarrusel(arregloImg[i]);
        }, 1000);
        i++;
      } else {
        imagenRef.current.className = 'claseActivaC'
        setTimeout(() => {
          imagenRef.current.className = 'claseActivaC active'
          setCarrusel(arregloImg[i]);
        }, 1000);
        i = 0;
      }
    }, 4000);

    ref.current.className = 'claseActivaC div'
  }

   useEffect(() => {
     if (state) temporizador()
     setstate(true)
     return () => {
  return clearInterval(contador)
};
  }, [state]);

Este es el html

<>
      {
        state
          ? <div className={`claseActivaC`} ref={ref}>
            <img
              ref={imagenRef}
              style={Estilos}
              src={Carrusel}
              alt={"nada"}
            />
          </div>
          : <Spinner animation="border" variant="warning"
            style={{ width: "5rem", height: "5rem", marginTop: "10%", marginBottom: "10%" }} />
      }
    </>

4
  • Estas tratando la claseActivaC como string. Cambialo por className={claseActivaC} y vuelve a probar el 27 dic. 2021 a las 0:54
  • De acuerdo con @PauloUrbanoRivera, esto no es normal <div className={claseActivaC} ref={ref}>; aunque React no se queja, permite el cambio. Ahora, no se puede reproducir el error con el código que compartes. ¿Ves el error al estar contemplando el carrusel? ¿O es cuando montas/desmontas el componente?
    – g.4
    el 27 dic. 2021 a las 5:55
  • 1
    El error es muy ocasional y es cuando se monta o desmonta el componente. Como seria una ref de clase normal porque la verdad no sabia que estaba mal hecho de esa manera el 27 dic. 2021 a las 14:19
  • El error lo marca en el cambio de clase 'active' que esta dentro del primer setTimeout el 27 dic. 2021 a las 14:26

1 respuesta 1

1

Al regresar de la cola de tareas, la función setTimeout ya no encuentra el elemento <img> puesto que el componente ya fue desmontado, esta función hace referencia al mismo aquí:

setTimeout(() => {
      //TypeError: Cannot set properties of null (setting 'className')
      imagenRef.current.className = 'claseActivaC active'
      setCarrusel(arregloImg[i]);
}, 1000);

Como el elemento <img> ya no es parte del scope del componente recién montado, JS/React ya no puede hacer el set de la propiedad className; además, ya no hay nada en imagenRef.current; es null:

TypeError: Cannot set properties of null (setting 'className')


Detener la ejecución del setTimeout

Se puede arreglar el error deteniendo la ejecución del timer setTimeout.

En este momento, ya se detiene la ejecución del timer setInterval al desmontar el componente:

useEffect(() => {
     if (state) temporizador()
     setstate(true)
     return () => {
        return clearInterval(contador);
      };
}, [state]);

Solo queda detener la ejecución del timer setTimeout:

useEffect(() => {
     if (state) temporizador()
     setstate(true)
     return () => {
        return [clearInterval(contador),clearTimeout(timerSTO)];
      };
}, [state]);

También, hay que proporcionar un id a estas funciones setTimeout:

let contador;
//inmediatamente despues de la variable contador
let timerSTO;

Luego:

timerSTO = setTimeout(() => {
   imagenRef.current.className = 'claseActivaC active';
   setCarrusel(arregloImg[i]);
}, 1000);

Espero que esta respuesta sea de ayuda.

2
  • Gracias bro, era eso, no sabía que al limpiar el setInterval ejecutaba de nuevo todo, estaba atorado desde hace ya bastante rato <3 el 27 dic. 2021 a las 21:49
  • Así es setInterval crea una función, y luego setTimeout crea otra función; Te quedo muy bien la implementación del carrusel; saludos
    – g.4
    el 27 dic. 2021 a las 22:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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