Usé react-simple-image-slider para el control deslizante de imágenes en mi sitio web, pero después de cambiar el tamaño de la ventana del navegador, la aplicación se atasca.
El objetivo principal es hacer que el control deslizante de imagen simple de reacción responda.
El siguiente es el código.
import './App.css'; import {useLayoutEffect, useState } from 'react'; import SimpleImageSlider from 'react-simple-image-slider'; function App() { const [widthAndHeight, setwidthAndHeight] = useState([window.innerWidth, 600]); useLayoutEffect ( ()=> { function updateTheWidthAndHeight() { setwidthAndHeight([window.innerWidth, 600]); } window.addEventListener('resize', ()=>{ updateTheWidthAndHeight(); }) }) const images = [ { url: "logos/ethiopia.png" }, { url: "logos/favicon.ico" }, { url: "logos/gear.png" }, { url: "logos/gear.jpg" } ]; return ( <div> <SimpleImageSlider style={{ margin: '0 auto', marginTop: '0px'}} className="slider" width={widthAndHeight[0]} height={widthAndHeight[1]} slideDuration={1} loop={true} autoPlay={true} images={images} showBullets={false} showNavs={true} /> </div> ); } export default App;Olvidó una lista de dependencias para useLayoutEffect , por lo que está agregando un detector de eventos en cada procesamiento. Agregue una lista vacía para una ejecución única:
useLayoutEffect(() => { function updateTheWidthAndHeight() { setwidthAndHeight([window.innerWidth, 600]); } window.addEventListener("resize", () => { updateTheWidthAndHeight(); }); }, []);Le sugiero que use useEffect en lugar de useLayoutEffect .
Tal vez cause el bloqueo de actualizaciones visuales.
Ref: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
Espero que esto pueda ayudarte.