1

Estoy haciendo una pagina, de tipo ecommerce. Recién empiezo con react y un framework de css. Está en estado de desarrollo. Estoy usando MaterializeCSS, webpack y babel.

El carrusel funciona bien hasta que vas y volvés de otra página(componente) usando react-router. Cuando vuelvo a la página(componente) donde está el carrusel, este deja de funcionar:

  • Las imágenes no se renderizan en el componente. Pero estas imágenes, el html y css del carrusel existen en el DOM (lo chequeé con Crhome Dev Tools).
  • El carrusel no tiene funcionalidad. Pero conservo algunas propiedades de MaterializeCSS, como por ejemplo la altura (height) del contenedor con la clase .carousel.

Cuando refresco la página el carrusel funciona bien, hasta que me muevo a otra página y vuelvo.

probé:

  • Inicializar el javascript del carrusel en componentDidMount(){}.
  • Inicializarlo con hooks con useEffect.
  • Importar materialize.js y materialize.css en App.js o en CarouselHome.jsx
  • Import M from "materialize-css" en CarouselHome.jsx o no importarlo para nada (solo para probar si había alguna modificación. Per no.)

Y siempre tengo el mismo problema.

Observaciones:

  • Cuando remuevo la clase .carousel del componente no tengo problema con el renderizado de las imágenes cuando me muevo entre las paginas. Pero obviamente el carrusel deja de funcionar porque no tiene la clase .carousel.
  • El componente se monta y desmonta sin problemas.
  • Las configuraciones que se le pueden hacer al carrusel en sus opciones funcionan perfecto.
  • No aparece ningún error en la consola de Chrome Dev Tools.
  • Todo el html, css y las imágenes están en el DOM. Pero no se renderizan.

Se que hay cosas hardcodeadas y demás pero me llama la atención el comportamiento.

Dejo el codigo de los componentes y el repositorio en git hub. https://github.com/arielestebansoto/nocommerce/tree/bug-carousel

CarouselHome.jsx

import React from 'react'

import '../assets/styles/components/CarouselHome.scss'

import carousel1 from '../assets/pictures/img/carouselhome/carousel-1.png'
import carousel2 from '../assets/pictures/img/carouselhome/carousel-2.png'
import carousel3 from '../assets/pictures/img/carouselhome/carousel-3.png'
import carousel4 from '../assets/pictures/img/carouselhome/carousel-4.png'
import carousel5 from '../assets/pictures/img/carouselhome/carousel-5.png'

class CarouselHome extends React.Component {
    constructor() {
        super()
    }
    componentDidMount() {
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.CarouselHome');
            var instances = M.Carousel.init(elems, {
                fullWidth: true,
                indicators: true,
            });
        });
    }

    render() {
        return (
            <div className="carousel CarouselHome carousel-slider">
                <a className="carousel-item Carousel-item " href="#1"><img src={carousel1} /></a>
                <a className="carousel-item Carousel-item" href="#2"><img src={carousel2} /></a>
                <a className="carousel-item Carousel-item" href="#3"><img src={carousel3} /></a>
                <a className="carousel-item Carousel-item" href="#4"><img src={carousel4} /></a>
                <a className="carousel-item Carousel-item" href="#5"><img src={carousel5} /></a>
                <a className="carousel-item Carousel-item" href="#6"><img src={carousel3} /></a>
            </div>
        )
    } 
}
export default CarouselHome 

Home.jsx

import React from 'react'
import CarouselHome from '../components/CarouselHome'
import CarouselProducts from '../components/CarouselProducts'
import CardProduct from '../components/CardProduct'
import Footer from '../components/Footer'

const Home = () => 
    (
    <div>
        <CarouselHome />
        <CarouselProducts>
            <CardProduct />
            <CardProduct />
            <CardProduct />
            <CardProduct />
            <CardProduct />
        </CarouselProducts>
        <Footer />
    </div>    
)


export default Home

App.js

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'


import '../assets/styles/global.scss'
import 'materialize-css/dist/css/materialize.css'
import "materialize-css/dist/js/materialize.js";

import Home from '../pages/Home'
import Login from '../pages/Login'
import Product from '../pages/Product'
import Payment from '../pages/Payment'
import ShoppingCart from '../pages/ShoppingCart'
import ShippingDetails from '../pages/ShippingDetails'
import Success from '../pages/Success'
import Register from '../pages/Register'

import Header from '../components/Header'

const App = () => {
return (
<BrowserRouter>
    <Header />
    <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/login" component={Login}/> 
        <Route exact path="/product" component={Product}/> 
        <Route exact path="/payment" component={Payment}/> 
        <Route exact path="/shoppingcart" component={ShoppingCart}/> 
        <Route exact path="/shippingdetails" component={ShippingDetails}/>   
        <Route exact path="/success" component={Success}/> 
        <Route exact path="/register" component={Register}/> 
    </Switch>
</BrowserRouter>
 )
}
export default App

index.js

import React from 'react'
import { render } from 'react-dom'

import App from './container/App'

render(<App />, document.getElementById('app'))
4
  • Bienvenido a Stack Overflow en español, como el nombre lo dice es la versión en español por lo cual debes traducir tu respuesta.
    – MR Dev
    el 7 ago. 2021 a las 17:38
  • Por favor traduce tu pregunta al castellano, de lo contrario terminará cerrada. Saludos el 7 ago. 2021 a las 17:56
  • Si el parent component de la aplicación es App ¿En dónde se incluye a carrouselHome en la App? Saludos
    – g.4
    el 12 ago. 2021 a las 3:22
  • el carrouselHome se incluye en el componente Home. (se me pasó ponerlo en la pregunta, ahí lo agrego). el 12 ago. 2021 a las 15:18

1 respuesta 1

1

Pude resolver el bug. El problema estaba en el escuchador del inicializador: "document.addEventListener('DOMContentLoaded', callback(){...}"

por alguna razón no se volvía a ejecutar el callback necesario, para iniciar el carrusel, cuando volvía a la página(componente) donde estaba el carrusel.

solución: refactorizar la función. Que no la ejecute el escuchador del DOMContentLoaded. Sino que la ejecute el mismo componentDidMount(){}. No se si será la mejor práctica, pero al menos funciona, renderiza sin problemas.

antes:

componentDidMount() {
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.CarouselHome');
        var instances = M.Carousel.init(elems, {
            fullWidth: true,
            indicators: true,
        });
    });
}

despues:

componentDidMount() {   
    const elems = document.querySelectorAll('.CarouselHome');
    const instances = M.Carousel.init(elems, {
        fullWidth: true,
        indicators: true,
    });
}

tambien funciona en un componente de tipo función con useEffect()

1
  • Es un caso interesante, yo estuve revisando con un @keyframes de css, sin materialize y la animación funciona de forma esperada, incluso dentro de DOMContentLoaded, supongo que componentDidMount() asume que el contenido DOM ya esta cargado, pues se ejecuta inmediatamente después del método render(), de ahi la razón por la cual lograste que funcionara sin necesidad de DOMContentLoaded; también puede ser alguna restricción al inicializar componentes entre Materialize y ReactJS, saludos
    – g.4
    el 14 ago. 2021 a las 21:52

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.