修復未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“樣式”）

Question

我正在嘗試在我的 React 應用程序中制作幻燈片。 我正在使用下面的 function 進行幻燈片放映。

 var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("diabetes-day"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) { myIndex = 1 } x[myIndex - 1].style.display = "block"; setTimeout(carousel, 5000); // Change image every 5 seconds }

 <div className="slideshow-container"> <div className="diabetes-news"> <img className="diabetes-day" src={DiabetesDay}/> <img className="diabetes-day" src={Symptoms}/> <img className="diabetes-day" src={Managing}/> </div> </div>

當我運行代碼時，幻燈片可以正常工作。 但是，一旦我刷新頁面，頁面中的所有內容就會消失，並且我的控制台中出現以下錯誤。

我不太確定為什么刷新頁面后它會停止工作。 如果有人可以指導我如何解決此問題，那就太好了。

Answer 1

我在刷新頁面時也遇到了同樣的錯誤。 我已經使用 useEffect 鈎子來解決這個錯誤。

useEffect(() => {
  //your code
}, [value that is changing]);

Answer 2

看起來你正在使用 reactjs，最好用這個來改變你的代碼：

 const {useState, useEffect} = React; const Example = () => { const [imageIndex, setImageIndex] = useState(0); // change these images with yours const imagesSrc = [ "https://cdn.pixabay.com/photo/2022/03/03/11/19/nature-7045133_960_720.jpg", "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg", "https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg", ]; const carousel = () => { setImageIndex((prev) => (prev < 2? prev + 1: 0)); }; useEffect(() => { const timer = setInterval(() => { carousel(); }, 2000); // set the which timer you want return () => { clearInterval(timer); }; }, []); return ( <div className="slideshow-container"> <div className="diabetes-news"> <img className="diabetes-day" src={imagesSrc[imageIndex]} alt="" /> </div> </div> ); }; // Render it ReactDOM.render( <Example/>, document.getElementById("react") );

 .diabetes-day{ width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>