React プロジェクトでカルーセル コンポーネントを構築しようとしています。実際には、DOM を直接変更するのではなく、Refs を使用して純粋な JS で書かれた既存のカルーセル コンポーネントを活用しようとしています。シーケンス内の最初のスライドを現在のスライドとして (className current-slide で) マークしてカルーセルを初期化しようとすると、問題が発生します。このアクションを、{topMovies} が依存関係である useEffect フックに置きます。 {topMovies} は prop 経由でカルーセル コンポーネントに渡されるオブジェクトの配列であるため、topMovies が変更される (つまりロードされる) と、useEffect が実行される必要があります。これは機能します。ロード後、カルーセルの最初のスライドにはクラス名「current-slide」が付けられます。

ただし、2 番目のコード (nextSlide と moveToSlide) は、次のスライドを選択する関数の始まりです。トラック Ref (つまり、すべてのスライドのコンテナ) を関数に渡すと、className が「current-slide」の子要素が選択され、その className が削除されるようになります。これも機能しますが、少し遅れて (~1 秒)、className 'current-slide' が再表示されます。

const Carouselv2 = ({topMovies}) => { //参照 const trackRef = useRef(); const nextBtnRef = useRef(); const prevBtnRef = useRef(); const navDotsRef = useRef(); // プロップのロード時にカルーセルを初期化します const [isLoading, setIsLoading] = useState(true); useEffect(() => { if (topMovies && setIsLoading) { const slides = Array.from(trackRef.current.children); slides[0].classList.add('現在のスライド'); //最初のスライドを表示としてマークします const slideWidth = slides[0].getBoundingClientRect().width; const setSlidePosition = (スライド, インデックス) => { slide.style.left = slideWidth * インデックス 'px'; } slides.forEach(setSlidePosition); // スライドを並べて配置します setIsLoading(false); } }, [トップムービー]); //ボタンの機能 const moveToSlide = (currentSlide, targetSlide) => { //trackRef.current.style.transform = 'translateX(-' targetSlide.style.left ')'; currentSlide.classList.remove('現在のスライド'); //targetSlide.classList.add('現在のスライド'); } const updateDots = () => { } const 応答Btns = () => { } const prevSlide = (e) => { } const nextSlide = (e) => { const currentSlide = trackRef.current.querySelector('.current-slide'); const nextSlide = trackRef.current.children.nextElementSibling; moveToSlide(currentSlide, nextSlide); } 戻る （ 
  ; 
 
 {トップ映画&& topMovies.map((映画) => ( 
  
{映画.タイトル}
 
 ))} 
 
  nextSlide(e)}className="carousel_button carousel_button--right" ref={nextBtnRef}> 
  {topMovies && Array.apply(0, Array(topMovies.length)).map(() => { return  })} 
 
 ); }

最初に考えたのは、何らかの理由で className を変更すると useEffect が起動するということでしたので、isLoading 条件を含む if ステートメントを追加しました。しかしそれはうまくいかなかったので、このバグは useEffect フックに起因するものではないと思います。

これには非常に混乱していますが、Refs を使用するのはこれが初めてなので、非常に明らかな何かを見落としている可能性は十分にあります。助けてくれてありがとう！