Reactjs Swiper导航不使用typescript react

我正在测试一个旋转木马，我正在用swiper构建，但是导航和自动播放都不起作用。我不确定我做错了什么。我已经阅读了文档，但找不到bug

import React, { useEffect, useState } from "react";
import "./homeHeader.css";
import "swiper/swiper-bundle.css";

// redux
import { useSelector } from "react-redux";
import { RootStore } from "../../store/store";
import { Swiper, SwiperSlide } from "swiper/react";

import { NavLink } from "react-router-dom";

const HomeHeader: React.FC = () => {
  const [items, setItems] = useState<any[]>([]);
  const [genres, setGenres] = useState<any[]>([]);
  const MDBConfigState = useSelector(
    (state: RootStore) => state.postApiConfigurationReducer
  );

  const typeSearchState = useSelector(
    (state: RootStore) => state.userSearchTypeR
  );

  // genres
  const genresMoviesState = useSelector(
    (state: RootStore) => state.postMoviesGenresReducer
  );

  const genresTvShowsState = useSelector(
    (state: RootStore) => state.postTvshowsGenresReducer
  );

  //items
  const moviesNowPlayingState = useSelector(
    (state: RootStore) => state.requestNowPlayingMoviesReducer
  );
  const airingNowTvShowsPlayingState = useSelector(
    (state: RootStore) => state.tvShowsAiringTFetchReducer
  );

  useEffect(() => {
    //   creating variables depending on the type of research:
    if (
      moviesNowPlayingState.nowPlayingMoviesResponse &&
      typeSearchState.userSearchType === "movies"
    ) {
      setItems(moviesNowPlayingState.nowPlayingMoviesResponse!.results);
      setGenres(genresMoviesState.genresResponseMbd!.genres);
    }
    if (
      airingNowTvShowsPlayingState.tvShowsAiringTodayResponseMbd &&
      typeSearchState.userSearchType === "tv-shows"
    ) {
      setItems(
        airingNowTvShowsPlayingState.tvShowsAiringTodayResponseMbd!.results
      );
      setGenres(genresTvShowsState.tvshowsGenresResponseMbd!.genres);
    }
  }, [moviesNowPlayingState, airingNowTvShowsPlayingState]);

  const addsGenresList = (genreIds: number[]) => {
    let allocatedGenres = [];

    if (genres && genreIds.length > 0) {
      allocatedGenres = genres
        .filter((genres) => {
          return genreIds.includes(genres.id);
        })
        .map((genre) => {
          return genre.name;
        });
      return allocatedGenres;
    }
  };

  return (
    <header className="header-container">
      <div className="carousels-container">
        <div className="swiper-container carousel-movies">
          <Swiper
            init
            slidesPerView={1}
            loop
            spaceBetween={0}
            observer
            breakpoints={{
              1145: { slidesPerView: 1 },
              699: { slidesPerView: 1 },
            }}
            navigation={{
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            }}
            autoplay={{ delay: 1000 }}
          >
            <SwiperSlide>
              <div>slide 1</div>
            </SwiperSlide>
            <SwiperSlide>
              <div>slide 2</div>
            </SwiperSlide>
            <SwiperSlide>
              <div>slide 3</div>
            </SwiperSlide>
            <SwiperSlide>
              <div>slide 4</div>
            </SwiperSlide>
          </Swiper>

          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>
        </div>
      </div>
      {/* <div className="home-swiper-container carousel-people"></div> */}
    </header>
  );
};

export default HomeHeader;

import React，{useffect，useState}来自“React”；
导入“/homeHeader.css”；
导入“swiper/swiper bundle.css”；
//重演
从“react redux”导入{useSelector}；
从“../../store/store”导入{RootStore}；
从“Swiper/react”导入{Swiper，SwiperSlide}；
从“react router dom”导入{NavLink}；
const HomeHeader:React.FC=（）=>{
const[items，setItems]=useState（[]）；
const[genres，setGenres]=useState（[]）；
常量MDBConfigState=useSelector(
（状态：RootStore）=>state.postApiConfigurationReducer
);
constTypeSearchState=useSelector(
（state:RootStore）=>state.userSearchTypeR
);
//流派
const genresMoviesState=useSelector(
（状态：RootStore）=>state.postMoviesGenresReducer
);
const genresTvShowsState=useSelector(
（state:RootStore）=>state.postvshowsgenresreducer
);
//项目
const moviesNowPlayingState=使用选择器(
（状态：RootStore）=>state.requestNowPlayingMoviesReducer
);
const airingNowTvShowsPlayingState=使用选择器(
（状态：RootStore）=>state.tvShowsAiringTFetchReducer
);
useffect（（）=>{
//根据研究类型创建变量：
如果(
moviesNowPlayingState.nowPlayingMoviesResponse&&
typeSearchState.userSearchType==“电影”
) {
设置项（moviesNowPlayingState.nowPlayingMoviesResponse！.results）；
setGenres（genresMoviesState.genresresresponsembd！.genres）；
}
如果(
airingNowTvShowsPlayingState.TvshowSairingToday响应MBD&&
typeSearchState.userSearchType==“电视节目”
) {
设置项(
airingNowTvShowsPlayingState.TvshowSairingToday响应mbd！。结果
);
setGenres（genresTvShowsState.tvshowsGenresResponseMbd！.genres）；
}
}，[moviesNowPlayingState，airingNowTvShowsPlayingState]；
const addsGenresList=（genreIds:number[]）=>{
设allocatedGenres=[]；
如果（类型和类型ID.length>0）{
类型
.filter（（类型）=>{
返回genreId.includes（genres.id）；
})
.map（（流派）=>{
返回genre.name；
});
回报率；
}
};
返回(
幻灯片1
幻灯片2
幻灯片3
幻灯片4
{/*  */}
);
};
导出默认HomeHeader；

我认为正在发生的是元素没有被拾取，因此这可能会避免设置侦听器