如何解决反应useState / setState错误：当组件的多个实例在同一页面上时，此功能不起作用
这里有一些useState挂钩有麻烦，也许您知道如何使它工作！这是我要做的事的简要提要...
我正在制作一个LMS网页，可以让老师设计课程。教师可以从模板中挑选并插入视频/文本/图片。他们可能选择两列布局或三列布局。他们可以混合和匹配布局中的内容类型。因此，潜在的老师可以选择3列布局，并在模板中放置3个视频。
在继续之前，我需要确保学生观看视频的每一秒-而且，我非常接近将其投入使用。因此，我将一些状态存储在下面显示的主课程文件（CourseDash.js）中。我遇到麻烦的useState钩子是const [ videosToWatch,setVidosToWatch ] = useState([]);。
基本上，我正在将setVideosToWatch传递到我的视频组件（也如下所示）。如果视频出现在模板中，则视频组件会将URL添加到videosToWatch数组。视频播放完毕后，我将相同的信息添加到CourseDash.js中的watchedVideos。这样一来，我可以检查学生观看了哪些视频，并确保他们在继续课程之前已经观看了这些视频。
当我在模板中渲染one（1）VideoContent组件时，它可以正常工作。但是，当老师创建的课程在一个模板上具有两个不同的视频组件时，我得到了错误“ setVideosToWatch不是函数”。渲染一个视频组件时为什么起作用？为什么不兼得？谢谢您的帮助。这是代码：
//CourseDash.js
import React,{ useState,useEffect } from 'react';
import NavBar from '../Layout/NavBar';
import { useAuth0 } from '@auth0/auth0-react'
import Welcome from './Welcome'
import CourseContent from './CourseContent';
import { Button } from 'reactstrap'
import Finish from './Finish';
export default function CourseDash(props) {
const [ currentPanel,setCurrentPanel ] = useState('Welcome')
const { getAccessTokenSilently,user,logout } = useAuth0();
const [ navigation,setNavigation ] = useState()
const [ course,setCourse ] = useState({})
const [ customerInfo,setCustomerInfo ] = useState({})
const [ student,setStudent ] = useState({})
const [ selectedModule,setSelectedModule ] = useState({})
const [ clicked,setClicked ] = useState('')
const [ grade,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 !== 'Welcome' && setSelectedModule(course.modules.filter(mod => mod.id === currentPanel)[0])
currentPanel !== 'Welcome' && currentPanel !== 'Finish' && 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) => {
try {
const token = await getAccessTokenSilently();
const response = await fetch(`/api/GetSingleCourse/${_id}`,{
method: 'GET',headers: {
Authorization: `Bearer ${token}`,"Content-Type": "application/json; Charset=UTF-8"
}
})
const responseData = await response.json()
setCourse(responseData[0])
let tempNav = []
responseData[0].modules.forEach(mod => {
let navItem = {
buttonLink: mod.id,buttonAlt: mod.title,buttonType: 'module',buttonName: mod.title,}
tempNav.push(navItem)
})
setNavigation(tempNav)
} catch (error) {
console.log(error)
}
}
const getCustomerInfo = async () => {
try {
const token = await getAccessTokenSilently();
const response = await fetch(`/api/GetACustomer_id/${course.customerId}`,"Content-Type": "application/json; Charset=UTF-8",},})
const responseData = await response.json();
setCustomerInfo(responseData[0])
} catch (error) {
console.log(error)
}
}
const getStudentInfo = async () => {
try {
const token = await getAccessTokenSilently();
const response = await fetch(`/api/GetStudentByEmail/${user.name}`,}
})
const responseData = await response.json();
setStudent(responseData[0])
} catch (error) {
console.log(error)
}
}
useEffect(() => {
if(course.customerId){
getCustomerInfo()
}
if(course.modules){
let availablePoints = 0
let quizes = {}
course.modules.forEach(mod => {
if(mod.moduleType === 'quiz'){
quizes[mod.id] = {}
mod.quizContent.forEach(q => {
availablePoints += 1
quizes[mod.id][q.id] = 'studentAnswer'
})
}
})
quizes.pointTotal = availablePoints
setGrade(quizes)
}
},[course])
useEffect(() => {
if(props.match.params.id){
getCourseContent(props.match.params.id)
}
getStudentInfo()
},[props.match.params.id])
const display = (panel) => {
setCurrentPanel(panel)
setClicked(course.modules.filter(mod => mod.id === panel)[0].title)
}
if(!navigation){
return <div>Loading...</div>
}
const nextModule = () => {
currentPanel === 'Welcome' && setCurrentPanel(course.modules[0].id)
let indexOfModule = course.modules.findIndex(mod => mod.id === currentPanel)
currentPanel !== 'Welcome' && setCurrentPanel(course.modules[indexOfModule + 1].id)
}
const prevModule = () => {
let indexOfModule = course.modules.findIndex(mod => mod.id === currentPanel)
currentPanel !== 'Welcome' && indexOfModule !== 0 && (setCurrentPanel(course.modules[indexOfModule - 1].id))
}
const finishCourse = async () => {
let total = 0
course.modules.forEach(mod => {
if(mod.moduleType === 'quiz'){
mod.quizContent.forEach( ques => {
if(ques.answer === grade[mod.id][ques.id]){
total += 1
}
})
}
})
let fGrade = total/grade.pointTotal
setFinalGrade(fGrade)
try {
const token = await getAccessTokenSilently();
const response = await fetch(`/api/UpdateStudent/${student._id}`,{
method: 'PUT',body: JSON.stringify({grades: [...student.grades.filter(g => g.course !== course._id),{course: course._id,grade: fGrade}]})
})
} catch (error) {
console.log(error)
}
setCurrentPanel('Finish')
}
const enableButtons = () => {
let indexOfCurrModule = course.modules.findIndex(mod => mod.id === currentPanel)
currentPanel === 'Welcome' && setAllowedModules(mods => [...mods,course.modules[0].title])
currentPanel !== 'Welcome' && currentPanel !== 'Finish' && indexOfCurrModule !== course.modules.length -1 && setAllowedModules(mods => [...mods,course.modules[indexOfCurrModule + 1].title])
indexOfCurrModule === course.modules.length - 1 && setAllowedModules([])
}
if(!student){
return <div className='d-flex w-100 h-100 align-self-center justify-content-center text-light'><h4 style={{
borderRadius: '10px',backgroundColor: '#0F1D44',padding: '2%'
}}>It seems like you have not been assigned this course...</h4></div>
}
return (
<div
style={{
display: 'flex',flexDirection: 'row',width: '100%',maxWidth: '78%',zIndex: '10'
}}>
<NavBar newButtons={navigation} display={display} clicked={clicked} allowedModules={allowedModules} />
<div className='w-100 h-100' >
<div className='m-4'>
<h1 className='text-light'>Welcome to {course.courseTitle}!</h1>
<span className='text-light'>For {student.name} at {customerInfo.business}.</span>
</div>
{currentPanel === 'Welcome' && <Welcome nextModule={nextModule} currentPanel={currentPanel} course={course} customerInfo={customerInfo} student={student} enableButtons={enableButtons} /> }
{currentPanel !== 'Welcome' && currentPanel !== 'Finish' && <CourseContent selectedModule={selectedModule} grade={grade} setGrade={setGrade} setAllowedNext={setAllowedNext} setVideosToWatch={setVideosToWatch} videosToWatch={videosToWatch} setWatchedVideos={setWatchedVideos} />}
{currentPanel === 'Finish' && <Finish finalGrade={finalGrade} course={course} customerInfo={customerInfo} student={student} /> }
<div className='w-100 m-4' style={{
display: currentPanel === 'Welcome' || currentPanel === 'Finish' ? 'none' : 'flex'
}}>
<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 === 'Welcome'}>←</Button>
<Button onClick={() => {
enableButtons();
nextModule()
}} 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>
<Button onClick={() => {
finishCourse()
enableButtons();
}} color='success' size='md' alt='next module'
disabled={!allowedNext}
className='m-3'
style={{width: '97%',display: currentPanel === course.modules[course.modules.length - 1].id ? 'block' : 'none'}} >Finish Course!</Button>
</div>
</div>
</div>
)
}
这是我的视频内容组件，每个视频都在其中呈现。
//VideoContent.js
import React,{ useEffect } from 'react'
export default function VideoContent(props) {
const { content,setAllowedNext,setVideosToWatch,videosToWatch,setWatchedVideos } = props
const checkVideoPlay = () => {
setVideosToWatch(vids => [...vids,content]);
let video = document.getElementById(content);
let timeStarted = -1;
let timePlayed = 0;
let duration = 0;
const getDuration = () => {
duration = video.duration;
document.getElementById("duration").appendChild(new Text(Math.round(duration)+""));
console.log("Duration: ",duration);
}
// If video metadata is laoded get duration
if(video.readyState > 0){
getDuration.call(video);
}
else{
//If metadata not loaded,use event to get it
video.addEventListener('loadedmetadata',getDuration);
}
// remember time user started the video
const videoStartedPlaying = () => {
timeStarted = new Date().getTime()/1000;
}
const videoStoppedPlaying = (event) => {
// Start time less then zero means stop event was fired vidout start event
if(timeStarted>0) {
var playedFor = new Date().getTime()/1000 - timeStarted;
timeStarted = -1;
// add the new number of seconds played
timePlayed+=playedFor;
}
document.getElementById("played").innerHTML = Math.round(timePlayed)+"";
// Count as complete only if end of video was reached
if(timePlayed>=duration && event.type=="ended") {
setWatchedVideos(vids => [...vids,content])
}
}
video.addEventListener("play",videoStartedPlaying);
video.addEventListener("playing",videoStartedPlaying);
video.addEventListener("ended",videoStoppedPlaying);
video.addEventListener("pause",videoStoppedPlaying);
}
useEffect(() => {
checkVideoPlay();
},[content] )
return (
<div className='d-flex flex-column justify-content-center align-items-center m-2'
style={{
color: 'white',}}>
<video id={content} src={content} style={{borderRadius: '5px',width: '100%'}} controls />
<div>
<span>Played </span>
<span id="played">0</span><span> seconds out of </span>
<span id="duration"></span><span> seconds. (only updates when the video pauses)</span>
</div>
</div>
)
}
解决方法
哇...反应开发人员错误。我忘了在所有模板上钻道具……我只做了一个模板。
每个模板都使用相同的视频内容文件...已回答！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。