反应 useState/setState 错误:当组件的多个实例在同一页面上时不是函数 [英] React useState/setState Error: Not a function when multiple instances of compnent are on same page

问题描述

这里使用一些 useState 钩子有点麻烦也许你知道如何让它工作！这是我正在尝试做的事情的简要概述...

我正在制作一个 LMS 网页，让教师设计课程.教师可以从模板中挑选并插入视频/文本/图片.他们可能会选择两列布局或三列布局.他们可以混合和匹配布局中的内容类型.因此，教师可能会选择 3 列布局并在模板中放置三个视频.

我需要确保学生在继续之前观看视频的每一秒 - 我非常接近让它发挥作用.所以我将一些状态存储在如下所示的主课程文件 (CourseDash.js) 中.我遇到问题的 useState 钩子是 const [ videosToWatch, setVidosToWatch ] = useState([]);.

基本上我将 setVideosToWatch 传递给我的视频组件(也如下所示).如果模板中出现视频，则视频组件会将 url 添加到 videosToWatch 数组.当视频播放完毕后，我将相同的信息添加到 CourseDash.js 中的 watchedVideos.这样我就可以查看学生观看了哪些视频，并确保他们在继续课程之前观看了这些视频.

当我在模板中渲染一 (1) 个 VideoContent 组件时，它工作得很好.但是，当教师在一个模板上创建具有两个不同视频组件的课程时……我收到错误setVideosToWatch 不是函数".为什么在渲染一个视频组件时它会起作用?为什么不同时?感谢您的帮助 这是代码:

//CourseDash.jsimport React, { useState, useEffect } from 'react';从'../Layout/NavBar'导入导航栏；从@auth0/auth0-react"导入 { useAuth0 }从'./Welcome'导入欢迎从'./CourseContent'导入CourseContent；从'reactstrap'导入{按钮}从'./Finish'导入完成；导出默认函数 CourseDash(props) {const [ currentPanel, setCurrentPanel ] = useState('Welcome')const { getAccessTokenSilently, user, logout } = useAuth0();const [导航，setNavigation] = useState()const [ course, setCourse ] = useState({})const [ customerInfo, setCustomerInfo ] = useState({})const [学生，setStudent] = useState({})const [ selectedModule, setSelectedModule ] = useState({})const [ clicked, setClicked ] = useState('')const [等级，setGrade] = useState([])const [ finalGrade, setFinalGrade ] = useState(0);const [ allowedModules, setAllowedModules ] = useState([]);const [ allowedNext, setAllowedNext ] = useState(true)const [videosToWatch, setVideosToWatch ] = useState([])const [watchedVideos, setWatchedVideos] = useState([])useEffect(() => {currentPanel !== '欢迎' &&setSelectedModule(course.modules.filter(mod => mod.id === currentPanel)[0])currentPanel !== '欢迎' &&currentPanel !== '完成' &&setClicked(course.modules.filter(mod => mod.id === currentPanel)[0].title)}, [currentPanel])useEffect(() => {setAllowedNext(videosToWatch.every(vid =>watchedVideos.includes(vid)))}, [watchedVideos,videosToWatch])const getCourseContent = async (_id) =>{尝试 {const token = await getAccessTokenSilently();const response = await fetch(`/api/GetSingleCourse/${_id}`, {方法:'获取'，标题:{授权:`Bearer ${token}`，内容类型":应用程序/json；字符集=UTF-8"}})const responseData = 等待 response.json()设置课程(响应数据 [0])让 tempNav = []responseData[0].modules.forEach(mod => {让导航项 = {按钮链接:mod.id，buttonAlt: mod.title,按钮类型:'模块'，按钮名称:mod.title，}tempNav.push(navItem)})设置导航(tempNav)} 捕捉(错误){控制台日志(错误)}}const getCustomerInfo = async() =>{尝试 {const token = await getAccessTokenSilently();const response = await fetch(`/api/GetACustomer_id/${course.customerId}`, {方法:'获取'，标题:{授权:`Bearer ${token}`，内容类型":应用程序/json；字符集=UTF-8",},})const responseData = 等待 response.json();设置客户信息(响应数据 [0])} 捕捉(错误){控制台日志(错误)}}const getStudentInfo = async() =>{尝试 {const token = await getAccessTokenSilently();const response = await fetch(`/api/GetStudentByEmail/${user.name}`, {方法:'获取'，标题:{授权:`Bearer ${token}`，内容类型":应用程序/json；字符集=UTF-8",}})const responseData = 等待 response.json();设置学生(响应数据 [0])} 捕捉(错误){控制台日志(错误)}}useEffect(() => {如果(课程.customerId){获取客户信息()}如果(课程.模块){让可用点数 = 0让测验= {}course.modules.forEach(mod => {if(mod.moduleType === '测验'){测验[mod.id] = {}mod.quizContent.forEach(q => {可用点数 += 1测验[mod.id][q.id] = 'studentAnswer'})}})quizes.pointTotal = availablePointssetGrade(测验)}}， [课程])useEffect(() => {if(props.match.params.id){getCourseContent(props.match.params.id)}获取学生信息()}, [props.match.params.id])const display = (面板) =>{设置当前面板(面板)setClicked(course.modules.filter(mod => mod.id === panel)[0].title)}如果(！导航){返回<div>加载中...</div>}const nextModule = () =>{currentPanel === '欢迎' &&setCurrentPanel(course.modules[0].id)让 indexOfModule = course.modules.findIndex(mod => mod.id === currentPanel)currentPanel !== '欢迎' &&setCurrentPanel(course.modules[indexOfModule + 1].id)}const prevModule = () =>{让 indexOfModule = course.modules.findIndex(mod => mod.id === currentPanel)currentPanel !== '欢迎' &&indexOfModule !== 0 &&(setCurrentPanel(course.modules[indexOfModule - 1].id))}const FinishCourse = async() =>{让总数 = 0course.modules.forEach(mod => {if(mod.moduleType === '测验'){mod.quizContent.forEach( 问题 => {if(ques.answer === grade[mod.id][ques.id]){总计 += 1}})}})让 fGrade = total/grade.pointTotalsetFinalGrade(fGrade)尝试 {const token = await getAccessTokenSilently();const response = await fetch(`/api/UpdateStudent/${student._id}`, {方法:'PUT'，标题:{授权:`Bearer ${token}`，内容类型":应用程序/json；字符集=UTF-8",},正文:JSON.stringify({成绩:[...student.grades.filter(g => g.course !== course._id), {course: course._id, grade: fGrade}]})})} 捕捉(错误){控制台日志(错误)}setCurrentPanel('完成')}const enableButtons = () =>{让 indexOfCurrModule = course.modules.findIndex(mod => mod.id === currentPanel)currentPanel === '欢迎' &&setAllowedModules(mods => [...mods, course.modules[0].title])currentPanel !== '欢迎' &&currentPanel !== '完成' &&indexOfCurrModule !== course.modules.length -1 &&setAllowedModules(mods => [...mods, course.modules[indexOfCurrModule + 1].title])indexOfCurrModule === course.modules.length - 1 &&setAllowedModules([])}如果(！学生){返回<div className='d-flex w-100 h-100 align-self-center justify-content-center text-light'><h4 style={{边界半径:'10px'，背景颜色:'#0F1D44'，填充:'2%'}}>您好像还没有被分配到这门课程...</h4></div>}返回 (
<h1 className='text-light'>欢迎来到{course.courseTitle}！</h1><span className='text-light'>对于 {customerInfo.business} 的 {student.name}.</span>
{currentPanel === '欢迎' &&<欢迎nextModule={nextModule} currentPanel={currentPanel} course={course} customerInfo={customerInfo} student={student} enableButtons={enableButtons}/>}{currentPanel !== '欢迎' &&currentPanel !== '完成' &&<CourseContent selectedModule={selectedModule} grade={grade} setGrade={setGrade} setAllowedNext={setAllowedNext} setVideosToWatch={setVideosToWatch} videosToWatch={videosToWatch} setWatchedVideos={setWatchedVideos}/>}{currentPanel === '完成' &&<Finish finalGrade={finalGrade} course={course} customerInfo={customerInfo} student={student}/>}<div className='w-100 m-4' style={{显示:currentPanel === '欢迎' ||currentPanel === '完成' ?'无':'弹性'}}><Button onClick={prevModule} color='primary' size='md' alt='previous module' className='m-2' style={{width: '97%'}} disabled={course.modules.findIndex(mod => mod.id === currentPanel) === 0 ||currentPanel === '欢迎'}>←</Button><按钮 onClick={() =>{启用按钮()；下一个模块()}} color='primary' size='md' alt='next module'className='m-2' style={{width: '97%'}} disabled={course.modules.findIndex(mod =>mod.id === currentPanel) === course.modules.length - 1 ||!allowedNext}>→</Button><按钮 onClick={() =>{完成课程()启用按钮()；}} color='success' size='md' alt='next module'禁用={!allowedNext}类名='m-3'style={{width: '97%', display: currentPanel === course.modules[course.modules.length - 1].id ?'block' : 'none'}} >完成课程！</Button>

)}

这是我的视频内容组件，其中渲染了每个视频.

//VideoContent.jsimport React, { useEffect } from 'react'导出默认函数 VideoContent(props) {const { 内容、setAllowedNext、setVideosToWatch、videosToWatch、setWatchedVideos } = propsconst checkVideoPlay = () =>{setVideosToWatch(vids => [...vids, content]);让视频 = document.getElementById(content);让 timeStarted = -1;让时间播放 = 0;让持续时间 = 0;const getDuration = () =>{持续时间 = video.duration;document.getElementById("duration").appendChild(new Text(Math.round(duration)+""));控制台日志(持续时间:"，持续时间)；}//如果视频元数据已加载，则获取持续时间如果(video.readyState > 0){getDuration.call(视频);}别的{//如果元数据没有加载，使用事件来获取它video.addEventListener('loadedmetadata', getDuration);}//记住用户开始视频的时间const videoStartedPlaying = () =>{timeStarted = new Date().getTime()/1000;}const videoStoppedPlaying = (事件) =>{//开始时间小于零表示停止事件被触发 vidout start 事件如果(时间开始> 0){var playFor = new Date().getTime()/1000 - timeStarted;时间开始 = -1;//添加新的播放秒数timePlayed+=playedFor;}document.getElementById("played").innerHTML = Math.round(timePlayed)+"";//仅当到达视频结尾时才算作完成if(timePlayed>=duration && event.type==ended") {setWatchedVideos(vids => [...vids, content])}}video.addEventListener(播放"，videoStartedPlaying)；video.addEventListener(播放"，videoStartedPlaying)；video.addEventListener(结束"，videoStoppedPlaying)；video.addEventListener(暂停"，videoStoppedPlaying)；}useEffect(() => {检查视频播放()；}， [内容] )返回 (<div className='d-flex flex-column justify-content-center align-items-center m-2'风格={{白颜色'，}}><video id={content} src={content} style={{borderRadius: '5px', width: '100%'}} 控件/><div><span>播放</span><span id="played">0</span><span></span> 中的秒数<span id=持续时间"></span><span>秒.(仅在视频暂停时更新)</span>