React中的定時影像輪播不起作用

所以我對 React 并不完全陌生，但這讓我打敗了，它看起來很簡單，但我就是無法讓它作業。

我想瀏覽一組影像并在當前索引處顯示影像。一切都在控制臺中按預期和預期作業，即我看到了正確的索引和 img url。

但是顯示的影像沒有改變，我只是不明白為什么，但我在 image[0] 看到了第一張影像，這樣就可以了。我還想補充一下，我已經用谷歌搜索了，沒有任何幫助，甚至嘗試過副駕駛，我基本上給了我這個，所以現在我在這里提出我的第一個問題。謝謝！

這是我的代碼：

import { useEffect } from 'react';

import shoe_1 from "../images/shoe_nr_1.jpg";
import shoe_2 from "../images/shoe_nr_2.jpg";
import shoe_3 from "../images/shoe_nr_3.jpg";
import shoe_4 from "../images/shoe_nr_4.jpg";
import shoe_5 from "../images/shoe_nr_5.jpg";
import shoe_6 from "../images/shoe_nr_6.jpg";

function Gallery() {

const images = [shoe_1, shoe_2, shoe_3, shoe_4, shoe_5, shoe_6];
    
let newImage = images[0];

let i = 0;

    const gallery = () => {
        if (i < images.length) {
            newImage = images[i];
            i  ;
            console.log(i);
            console.log(newImage)
        } else {
            i = 0;
            newImage = images[i];
        };

        setTimeout(gallery, 3000);
    };

    useEffect(() => {
        gallery();
    })

    return (
        <div className="w-full mx-auto h-4/6 lg:h-5/6 bg-slate-400">
            <div className="h-full w-full" style={{ backgroundImage: `url("${newImage}")` }}></div>
        </div>
    )
}

export default Gallery

uj5u.com熱心網友回復：

useState當組件中的資料需要更改時使用鉤子

import { useEffect, useState } from "react"

import shoe_1 from "../images/shoe_nr_1.jpg"
import shoe_2 from "../images/shoe_nr_2.jpg"
import shoe_3 from "../images/shoe_nr_3.jpg"
import shoe_4 from "../images/shoe_nr_4.jpg"
import shoe_5 from "../images/shoe_nr_5.jpg"
import shoe_6 from "../images/shoe_nr_6.jpg"

function Gallery() {
  const [images, setImages] = useState([
    shoe_1,
    shoe_2,
    shoe_3,
    shoe_4,
    shoe_5,
    shoe_6,
  ])
  const [index, setIndex] = useState(0)

  useEffect(() => {
    if (images.length) {
      const timeoutId = setTimeout(() => {
        setIndex((index   1) % images.length)
      }, 3000)

      return () => clearTimeout(timeoutId)
    }

    return () => {}
  }, [index])

  return (
    <div className="w-full h-screen mx-auto  lg:h-5/6 bg-slate-400">
      <div
        className="min-h-full w-full"
        style={{ backgroundImage: `url("${images[index]}")` }}
      ></div>
    </div>
  )
}

export default Gallery

編輯：更新了代碼

uj5u.com熱心網友回復：

import { useEffect, useState } from 'react';

import shoe_1 from "../images/shoe_nr_1.jpg";
import shoe_2 from "../images/shoe_nr_2.jpg";
import shoe_3 from "../images/shoe_nr_3.jpg";
import shoe_4 from "../images/shoe_nr_4.jpg";
import shoe_5 from "../images/shoe_nr_5.jpg";
import shoe_6 from "../images/shoe_nr_6.jpg";

function Gallery() {

const images = [shoe_1, shoe_2, shoe_3, shoe_4, shoe_5, shoe_6];
const [newImage, setNewImage] = useState(images[0]);


let i = 0;

    const gallery = () => {
        if (i < images.length) {
            
            setNewImage(images[i]);
            i  ;
            console.log(i);
            console.log(newImage)
        } else {
            i = 0;
            setNewImage(images[i]);
        };

        setTimeout(gallery, 3000);
    };

    useEffect(() => {
        gallery();
    })

    return (
        <div className="w-full mx-auto h-4/6 lg:h-5/6 bg-slate-400">
            <div className="h-full w-full" style={{ backgroundImage: `url("${newImage}")` }}></div>
        </div>
    )
}

export default Gallery

uj5u.com熱心網友回復：

好的，所以曲線球，我沒有將依賴項 [ ] 放在 useEffect 中，因為某些擴展告訴我我不需要它。與它一起作業“ish”。現在的問題是跳過 1 個數字。從影像 3 到 5 等等。但我會自己嘗試。謝謝！

標籤：javascript反应jsx

上一篇：僅在typescript中通過props的一個屬性做出反應

下一篇：如何為迭代的多個陣列回傳jsx？