如何每 x 秒更改一次图像和背景颜色。 反应

Question

期望的结果 = 每 x 秒更改图像和背景颜色。

我遇到的问题 = 它没有显示所有颜色和图像。 它从粉色 -> 橙色 -> 粉色 -> 橙色，跳过蓝色和绿色。

import * as React from 'react';

// Images
import heroPink from './hero-pink.png';
import heroBlue from './hero-blue.png';
import heroOrange from './hero-orange.png';
import heroGreen from './hero-green.png';
import logo from './oddballs_logo.svg';


const colors = [
  "#F9B199",
  "#237E95",
  "#D79446",
  "#C2C138"
];

const images = [
  heroPink,
  heroBlue,
  heroOrange,
  heroGreen
];

export default function App() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((v) => (v === 3 ? 0 : v + 1));
    }, 1000);
  }, []);

  return (
    <div className="App" style={{ backgroundColor: colors[value] }}>
      <img src={images[value]}/>
    </div>

  );
}

Answer 1

您需要使用 return 语句清除间隔。 这意味着，在每次卸载时，间隔将被清除，当该组件将被装载时，新的间隔将被注册。 它对我来说很好用，希望你的问题也能解决。

  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((v) => {
        return v === 4 ? 0 : v + 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, []);

---

请记住，清除任何间隔事件很重要。 否则会发生 memory 泄漏。

---

这是完整的例子：

import React from "react";

const colors = ["#92c952", "#771796", "#24f355", "#d32776", "#f66b97"];

const images = [
  "https://via.placeholder.com/150/92c952",
  "https://via.placeholder.com/150/771796",
  "https://via.placeholder.com/150/24f355",
  "https://via.placeholder.com/150/d32776",
  "https://via.placeholder.com/150/f66b97"
];

export default function App() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((v) => {
        return v === 4 ? 0 : v + 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App" style={{ backgroundColor: colors[value] }}>
      <img src={images[value]} alt="img" style={{ border: "3px solid" }} />
    </div>
  );
}

Answer 2

您可以使用setInterval function 来实现该行为。 在这里，我为颜色和图像索引使用了两种状态。

const colors = ["#eb4034", "#ebdb34", "#34eb37"];

const images = [
  "https://images.unsplash.com/photo-1649894158666-c10421960f13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=50",
  "https://images.unsplash.com/photo-1648737154448-ccf0cafae1c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
  "https://images.unsplash.com/photo-1585974738771-84483dd9f89f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1072&q=80"
];

export default function App() {
  const [image, setImage] = useState(0);
  const [color, setColor] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      if (image === images.length - 1 && color === colors.length - 1) {
        setImage(0);
        setColor(0);
      } else {
        setImage(image + 1);
        setColor(color + 1);
      }
    }, 3000);

    return () => {
      clearInterval(interval);
    };
  }, [image, color]);

  return (
    <div style={{ backgroundColor: `${colors[color]}`, padding: "20px" }}>
      <img src={images[image]} style={{ width: "100%" }} alt="img" />
    </div>
  );
}

还要清理间隔卸载阶段。