Javascript 使用带有react网络摄像头的setCallback检测react JS中webcamRef.current.video.readyState的更改 我已经用一个画布建立了正确的反应网络摄像头，当网络摄像头准备好的时候，我试图在它的中间画一个矩形。p>

useCallback是这个用例的理想钩子，因为它在每次更新ref时都会被调用（useEffect对refs不是很好）；但在我的例子中，我只想检测网络摄像头状态的变化，而不是ref本身

问题是，只有在readyState为0时，才会第一次调用它（因为视频尚未准备就绪）

另外，如果我尝试将useffect与webcamRef.current.video.readyState一起使用，它会说webcam.ref没有定义，因为它最初有一个空值

全部代码：

function WebcamCard({ children }) {
    const styles = cardStyles();
    const { status, mediaBlobUrl, rep, setRep } = useVideo();
    //const webcamRef = useRef(null);
    const canvasRef = useRef(null);
    const auxCanvasRef = useRef(null);
    const webcamRef = useCallback(node => {
        if (!rep && webcamRef.current !== null && typeof webcamRef.current !== "undefined") {
            console.log("state: " + webcamRef.current.video.readyState); 
        }
    }, [])

    /* Blazeface runs only in the webcam mode (not during the repetition) */
    useEffect(() => {
        if (!rep && webcamRef.current !== null && typeof webcamRef.current !== "undefined") {
            runBlazeFace(webcamRef.current.video, canvasRef.current)
        }
    }, [rep]);

    /* Repetition mode changes when the status changes to 'stopped */
    useEffect(() => {
        status == 'stopped' ? setRep(true) : setRep(false)
    }, [status])

    return (
        <>
            <Card className={styles.root}>
                <CardActionArea>
                    {!rep
                        ? <>
                            <Webcam className={styles.canvas}
                                ref={webcamRef}
                                screenshotFormat="image/jpeg"
                                style={{ zIndex: 7, audio: false }} />
                            <canvas className={styles.canvas}
                                ref={canvasRef}
                                style={{ zIndex: 8 }} />
                            <canvas className={styles.canvas}
                                ref={auxCanvasRef}
                                style={{ zIndex: 9 }} />
                        </>
                        : <video className={styles.canvas} src={mediaBlobUrl} autoPlay loop />
                    }
                    {children}
                </CardActionArea>
            </Card>
        </>
    )
}

export default WebcamCard

功能网络摄像头卡（{children}）{
const styles=cardStyles（）；
const{status，mediaBlobUrl，rep，setRep}=useVideo（）；
//const webcamRef=useRef（null）；
const canvasRef=useRef（null）；
const auxCanvasRef=useRef（null）；
const webcamRef=useCallback（节点=>{
如果（！rep&&webcamRef.current！==null&&typeof webcamRef.current！==“未定义”）{
log（“状态：+webcamRef.current.video.readyState”）；
}
}, [])
/*Blazeface仅在网络摄像头模式下运行（不在重复过程中）*/
useffect（（）=>{
如果（！rep&&webcamRef.current！==null&&typeof webcamRef.current！==“未定义”）{
runBlazeFace（webcamRef.current.video，canvasRef.current）
}
}，[rep]）；
/*当状态更改为“已停止”时，重复模式将更改*/
useffect（（）=>{
状态==“已停止”？setRep（真）：setRep（假）
}，[状态]）
返回(
{！代表
? 
: 
}
{儿童}
)
}
导出默认网络摄像头卡

function WebcamCard({ children }) {
    const styles = cardStyles();
    const { status, mediaBlobUrl, rep, setRep } = useVideo();
    //const webcamRef = useRef(null);
    const canvasRef = useRef(null);
    const auxCanvasRef = useRef(null);
    const webcamRef = useCallback(node => {
        if (!rep && webcamRef.current !== null && typeof webcamRef.current !== "undefined") {
            console.log("state: " + webcamRef.current.video.readyState); 
        }
    }, [])

    /* Blazeface runs only in the webcam mode (not during the repetition) */
    useEffect(() => {
        if (!rep && webcamRef.current !== null && typeof webcamRef.current !== "undefined") {
            runBlazeFace(webcamRef.current.video, canvasRef.current)
        }
    }, [rep]);

    /* Repetition mode changes when the status changes to 'stopped */
    useEffect(() => {
        status == 'stopped' ? setRep(true) : setRep(false)
    }, [status])

    return (
        <>
            <Card className={styles.root}>
                <CardActionArea>
                    {!rep
                        ? <>
                            <Webcam className={styles.canvas}
                                ref={webcamRef}
                                screenshotFormat="image/jpeg"
                                style={{ zIndex: 7, audio: false }} />
                            <canvas className={styles.canvas}
                                ref={canvasRef}
                                style={{ zIndex: 8 }} />
                            <canvas className={styles.canvas}
                                ref={auxCanvasRef}
                                style={{ zIndex: 9 }} />
                        </>
                        : <video className={styles.canvas} src={mediaBlobUrl} autoPlay loop />
                    }
                    {children}
                </CardActionArea>
            </Card>
        </>
    )
}

export default WebcamCard