反应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>
    )
}

解决方法

哇...反应开发人员错误。我忘了在所有模板上钻道具……我只做了一个模板。

每个模板都使用相同的视频内容文件...已回答！