问题概述:
1.使用Homepage.js、Sidebar.js组件和Project.js组件构建个人网站。
1.项目组件从对象的项目列表数组Map到主页上。
1.单击项目组件时,Sidebar.js组件将打开并显示活动项目信息。
- App.js具有activeProject状态,默认设置为列表中的第一个项目,因此边栏不会抛出错误。
1.最终结果是边栏在项目单击时显示正确的项目标题、信息和视频源(检查模式),但视频本身是错误的,始终显示App.js上占位符的视频集
Props passes right info, wrong video
详细数据:
在我的App.js中,我将activeProject设置为列表中的第一个项目作为默认值,通过它的标题。
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>
每个项目组件都有一个click事件,用于打开侧栏组件,其中包含基于所单击项目标题得额外项目信息.
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;
});
结果是侧边栏组件在检查工具中显示正确的标题、项目信息,甚至是正确的视频源,但项目视频总是列表中的第一个项目。
我尝试过的方法:
我尝试将App.jsactiveProject状态占位符更改为第二个项目。
const [activeProject, setActiveProject] = useState(ListOfProjects[1].title);
这导致边栏显示正确的项目标题、信息和视频源(检查模式),但现在视频始终显示第二个项目的视频。
然后我尝试将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
3条答案
按热度按时间avwztpqn1#
试试看,如果the find找不到数据,它可能会返回undefined。所以你不能析构undefined。添加
|| {}
会检查ListOfProjects.find((project) => { return project.title === activeProject; })
是否未定义,它会变成一个空对象{}
7tofc5zh2#
只需创建默认项目
此外,请确保
title
是唯一的,否则.find
将返回错误的项目。zengzsys3#
我想问题不在于你把数据传递给组件的方式,问题在于,当你重新呈现你的组件时,它会改变你的视频
<source />
标签中的src
,但它实际上并没有重新加载视频,因此,即使使用正确的URL,您也会看到一个旧的或错误的视频。我建议在每次调用显示视频的子组件时使用load()
。例如,每当视频源更改时,在useEffect中调用load:这将强制
video
重新加载新的src
。编辑:
我克隆了你的项目,问题确实是用新的源代码重新加载视频。下面是解决方案。在你的Sidebar.js中添加下面的
useEffect
,并将className="sidebar-video"
添加到你的<video />
标记中。这样就可以了。