reactjs - 有没有办法在反应JS中的一段时间内更改图像

Question

我想每 3 秒更改一次左侧的图像。是否有任何技术可以在不使用反应图像滑块的情况下做到这一点？

我在这里附上了我的代码。我曾尝试使用反应钩子来做到这一点。我已将图像存储在数组中。图像仅在前 8-10 秒内完美变化。

import React, { useEffect, useState } from "react";
import bannerImg1 from "../../Assets/Images/bannerProduct1.png";
import bannerImg2 from "../../Assets/Images/bannerProduct2.png";
import { Row, Col, Container } from "react-bootstrap";
import { FaCaretRight, FaChevronLeft, FaChevronRight } from "react-icons/fa";
import "./BannerSlider.css";

const BannerSlider = () => {
  const imageArray = [bannerImg1, bannerImg2];
  let [count, setCount] = useState(0);
  const [image, setImage] = useState(imageArray[count]);

  useEffect(() => {
    setImage(imageArray[count]);
  }, [count]);

  useEffect(() => {
    setInterval(() => {
      setCount(count + 1);
    }, 3000);
  }, []);

  return (
    <div className="bannerSlider">
      <Container>
        <div className="slider-wrapper">
          <Row className="d-flex align-items-center">
            <Col lg={6} className="banner-image">
              <img src={image} className="w-100 img-fluid" alt="" />
            </Col>
            <Col lg={6} className="banner-text">
              <h2>Where your imagination come true</h2>

              <p>
                {" "}
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo
                porro neque odio, at aspernatur explicabo?{" "}
              </p>

              <button>
                Explore More <FaCaretRight className="banner-button-icon" />{" "}
              </button>
            </Col>
          </Row>
        </div>
      </Container>
    </div>
  );
};

标签： reactjs

Answer 1

问题

根据我对您的代码的阅读，您有一些问题：

1. useEffect卸载组件时不会清除任何正在运行的计时器。
2. 您已经关闭了count间隔回调中的初始状态，因此它没有正确更新。
3. 您不考虑增加超过数组长度。

解决方案

// move image array outside component so it's not a dependency
const imageArray = [bannerImg1, bannerImg2, bannerImg3];

const BannerSlider = () => {
  const [count, setCount] = useState(0);

  // Save timer ref and return cleanup function to clear it
  useEffect(() => {
    const timerId = setInterval(() => {
      // Use a functional state update to correctly increment the count
      setCount(count => count + 1);
    }, 3000);

    return () => clearInterval(timerId);
  }, []);

  // `image` is derived state from the image array and current count
  // Take the count mod array length to get the correct computed index
  const image = imageArray[count % imageArray.length];

  return (
    <div className="bannerSlider">
      <Container>
        <div className="slider-wrapper">
          <Row className="d-flex align-items-center">
            <Col lg={6} className="banner-image">
              <img src={image} className="w-100 img-fluid" alt="" />
            </Col>
            <Col lg={6} className="banner-text">
              <h2>Where your imagination come true</h2>

              <p>
                {" "}
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo
                porro neque odio, at aspernatur explicabo?{" "}
              </p>

              <button>
                Explore More <FaCaretRight className="banner-button-icon" />{" "}
              </button>
            </Col>
          </Row>
        </div>
      </Container>
    </div>
  );
};