我试图运行以下代码，但我一直得到错误.我也尝试添加document. addEventList（'DOMContentLoaded'，（event）=>，但它仍然不工作.它不会给我给予错误，如果我把代码在控制台.它也不会给我给予错误，当我第一次加载它.但只要我刷新它开始给我错误.

import './Slider.css';
import Acc from './Accomodation/Acc'
import Flora from './Flora/Flora'
import Food from './OurFood/Food.js'
import Trek from './Treks/Treks';
import View from './OurView/View';
import Indoor from './IndoorGames/games';
let slideIndex = 0;
SlideShow()

function SlideShow(){
    
  let slides = document.getElementsByClassName("slide")
  console.log(slides)
  for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  slideIndex++;
  console.log(slideIndex)
  console.log(slides)
  if (slideIndex === 0) {slideIndex = 1}
  else if (slideIndex === slides.length) {slideIndex = 1} 
  else if (slideIndex > slides.length) {slideIndex = 1} 
  console.log(slides[slideIndex])
  slides[slideIndex-1].style.display = "block"; 

  setTimeout(SlideShow, 10000);

}

function Slider() {

    return (
    <div className='Slider'>
        <h1>Experiences</h1>
        <hr />
        <div className='MySlides'>
        <div className='1 slide fade'>
        <Acc></Acc>
        </div>
        <div className='2 slide fade'>
        <Flora></Flora>
        </div>
        <div className='3 slide fade'>
        <Food></Food>
        </div>
        <div className='4 slide fade'>
        <Trek></Trek>
        </div>
        <div className='5 slide fade'>
        <View></View>
        </div>
        <div className='6 slide fade'>
        <Indoor></Indoor>
        </div>
        </div>
        
        </div>
    
    )  

    
}

export default Slider;

字符串