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%" }} />
}
</>
claseActivaC
como string. Cambialo porclassName={claseActivaC}
y vuelve a probar<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?