React侧边栏视频显示异常与空状态报错问题求助

问题概述 #

• 正在构建包含Homepage.js、Sidebar.js和Project.js组件的个人网站
• 项目组件通过项目对象列表在Homepage中映射渲染
• 点击Project组件时，Sidebar.js组件打开并显示当前活跃项目的信息
• App.js中设置activeProject状态，默认值为列表首个项目以避免侧边栏报错
• 当前问题：点击项目后，侧边栏标题、信息正确，浏览器检查工具中video的src也正确，但视频始终显示App.js中默认项目的内容

代码细节 #

App.js中的状态与组件传递 #

const [activeProject, setActiveProject] = useState(ListOfProjects[0].title);

return (
  <div className="App">
    <Navigation />
    <HomePage 
      isOpen={isOpen}
      setIsOpen={setIsOpen}
      activeProject={activeProject}
      setActiveProject={setActiveProject}
    />
    <Sidebar
      isOpen={isOpen}
      setIsOpen={setIsOpen}
      activeProject={activeProject}
    />
    <Footer />
  </div>
);

Homepage.js中的项目映射 #

<div className="project-list">
  {ListOfProjects.map((obj) => (
         <ProjectItem
                key={obj.id}
                title={obj.title}
                video={obj.video}
                videoAlt={obj.videoAlt}
                liveLink={obj.liveLink}
                codeLink={obj.codeLink}
                isOpen={isOpen}
                setIsOpen={setIsOpen}
                activeProject={activeProject}
                setActiveProject={setActiveProject}
         />
  ))}
</div>

Project组件的点击事件 #

const showSidebar = () => {
  setActiveProject(title);
  setIsOpen(!isOpen);
}

Sidebar.js中的数据匹配 #

const {title, liveLink, codeLink, video, videoAlt, tags, details, challenges, lessons} = ListOfProjects.find((project) => {
  return project.title === activeProject;
});

已尝试方案 #

1. 将App.js中activeProject默认值改为列表第二个项目

const [activeProject, setActiveProject] = useState(ListOfProjects[1].title);

结果：侧边栏标题、信息、检查工具中video src正确，但视频始终显示第二个项目的内容

2. 将App.js中activeProject默认值设为空字符串

const [activeProject, setActiveProject] = useState("");

结果：侧边栏触发报错：

Sidebar.js:15 Uncaught TypeError: Cannot destructure property 'title' of '_Projects_listOfProjects__WEBPACK_IMPORTED_MODULE_2__.default.find(...)' as it is undefined

解决方法 #

1. 修复视频不更新问题 #

视频未更新是因为浏览器缓存了video元素，即便src属性变化也不会自动重新加载。给video元素绑定key属性，强制React重新渲染该元素：

// 在Sidebar.js的视频标签中添加key
<video 
  key={video} // 也可使用项目唯一id：key={activeProjectData.id}
  src={video} 
  alt={videoAlt}
  controls
/>

当activeProject切换时，video值变化会触发key更新，React会销毁旧video元素并创建新的，从而加载新视频源。

2. 处理默认值为空的报错问题 #

在Sidebar.js中先判断活跃项目数据是否存在，再做解构赋值：

// Sidebar.js中修改数据获取逻辑
const activeProjectData = ListOfProjects.find(project => project.title === activeProject);

// 给解构属性设置默认值，避免未找到项目时报错
const {
  title = "", 
  liveLink = "", 
  codeLink = "", 
  video = "", 
  videoAlt = "", 
  tags = [], 
  details = "", 
  challenges = "", 
  lessons = ""
} = activeProjectData || {};

同时，App.js中可以将默认值设为空字符串，配合Sidebar的容错处理：

const [activeProject, setActiveProject] = useState("");

也可以在Sidebar组件中判断无活跃项目时，渲染提示内容：

// Sidebar.js返回部分
if (!activeProjectData) {
  return <div className="sidebar">请选择一个项目查看详情</div>;
}

// 正常渲染侧边栏内容
return (
  <div className="sidebar">
    {/* 项目详情内容 */}
  </div>
);

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