开发Netflix克隆应用时Banner组件出现重复图片问题求助

问题背景 #

开发Netflix克隆应用时，使用以下Banner组件代码和CSS，未在HomeScreen.js中重复调用Banner函数，但页面显示两张Banner图片，而教程中相同代码仅显示一张。

Banner组件代码：

function Banner() {
  return ( 
    <header 
      className="banner" 
      style={{
        backgroundSize: "cover",
        backgroundImage: 'url("https://thelesfilms.files.wordpress.com/2016/06/netflix-banner.jpg?w=640")',
        backgroundPosition: "center center",
      }}>
    </header>
  );
}

CSS代码：

.banner {
  height: 200px;
  position: relative;
}

排查与解决步骤 #

• 检查DOM结构：打开浏览器开发者工具（F12）的Elements面板，搜索<header class="banner">，确认是否存在两个相同的元素。如果有，说明组件被重复渲染了。
• 检查StrictMode影响：React 18的<StrictMode>在开发环境下会双重渲染组件以检测副作用。打开index.js，如果App被包裹在<StrictMode>标签中，暂时注释掉该标签，重新运行项目看是否恢复正常：

  // 注释前
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
  
  // 注释后
  root.render(
    <App />
  );
  

• 检查路由配置：查看App.js或路由配置文件，确认是否存在重复的路由规则（比如多个路径匹配到HomeScreen），或者是否多次渲染了HomeScreen组件。
• 检查组件导入与使用：排查项目中其他文件（如布局组件、Navbar等）是否意外导入并渲染了Banner组件。
• 检查CSS冲突：确认是否有其他元素意外应用了.banner类，或者父元素的背景样式导致视觉上的重复显示。

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