React中JS切换背景图失效：控制台显示变化但页面空白

问题描述 #

尝试用JavaScript每隔3秒切换React组件的背景图，控制台显示图片已切换，但3秒后页面变为空白。默认背景图可正常显示，图片名称及路径均无问题。

原React代码 #

import React, { useEffect, useState } from "react";

function Home() {
  let i = 0; // Start index from 0

  useEffect(() => {
    const interval = setInterval(backgroundImages, 3000);
    return () => {
      clearInterval(interval); // Clean up the interval when the component unmounts
    };
  }, []);

  function backgroundImages() {
    const imagearr = [
      "rajwada.jpeg",
      "indore.jpeg",
      "females.jpeg",
      "mayor.jpg"
    ]

    console.log("Changing background image");
    document.getElementById("main").style.backgroundImage = `url(${imagearr[i]})`;
    i++;
    if (i === imagearr.length) {
      i = 0;
    }
  }

  return (
    <div className="PARENTHERO">
      <div className="Hero" id="main" >
        {/* <div className="WELCOME">
        <h1 className="Heading2">LUCKY DRAW</h1>
        <h1 className="Heading2"> NAGAR PALIKA NIGAM INDORE</h1>
        </div> */}
      </div>
    </div>
  );
}

export default Home;

原CSS代码 #

.Hero {
    background-image: url(mayor.jpg);
    height: 60vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.PARENTHERO {
    height: 100%;
}

问题原因 #

1. DOM操作与React虚拟DOM冲突：手动通过document.getElementById修改DOM样式，React虚拟DOM未同步该状态，组件重渲染时会将DOM样式重置为初始状态（无背景图），导致页面空白。
2. 普通变量无法触发重渲染：用普通变量i跟踪图片索引，变量变化不会触发React组件重渲染，无法保证视图与数据同步。

修复方案 #

使用React状态管理图片索引，通过状态变化触发组件重渲染，同时在JSX中动态绑定背景图样式，确保虚拟DOM与DOM状态一致。

修复后的React代码 #

import React, { useEffect, useState } from "react";

function Home() {
  // 用状态变量跟踪当前图片索引
  const [currentImgIndex, setCurrentImgIndex] = useState(0);
  const imagearr = [
    "rajwada.jpeg",
    "indore.jpeg",
    "females.jpeg",
    "mayor.jpg"
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImgIndex(prevIndex => {
        // 更新索引，到达数组末尾时重置为0
        const nextIndex = prevIndex + 1;
        return nextIndex === imagearr.length ? 0 : nextIndex;
      });
    }, 3000);

    // 组件卸载时清除定时器
    return () => clearInterval(interval);
  }, [imagearr.length]); // 依赖数组长度，防止数组变化时出现问题

  return (
    <div className="PARENTHERO">
      {/* 通过style动态绑定背景图，覆盖默认CSS样式 */}
      <div 
        className="Hero" 
        style={{ 
          backgroundImage: `url(${imagearr[currentImgIndex]})` 
        }}
      >
        {/* <div className="WELCOME">
        <h1 className="Heading2">LUCKY DRAW</h1>
        <h1 className="Heading2"> NAGAR PALIKA NIGAM INDORE</h1>
        </div> */}
      </div>
    </div>
  );
}

export default Home;

修复后的CSS代码（无需修改） #

.Hero {
    background-image: url(mayor.jpg);
    height: 60vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.PARENTHERO {
    height: 100%;
}

关键改进点 #

• 用useState管理索引状态：状态变化自动触发组件重渲染，确保视图与数据同步。
• 动态绑定样式到JSX：React维护虚拟DOM中的样式状态，避免手动修改DOM被重置的问题。
• 函数式更新索引：使用setCurrentImgIndex的函数式更新，确保每次取到最新索引值，规避闭包陷阱。
• 优化定时器依赖：将imagearr.length加入依赖数组，确保数组长度变化时重新设置定时器。

内容的提问来源于stack exchange，提问作者Ayush Sharma