javascript React.js -如何让setInterval知道变量何时改变了状态/值?

wbrvyc0a  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(126)

下面是我的相关Javascript代码--

useEffect(()=> {
    Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
    faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
    faceapi.nets.faceExpressionNet.loadFromUri('/models')
    ]).then(()=> {
      if(navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
          .getUserMedia({ audio:false, video:true })
          .then((stream) => {
            console.log(stream)
            const video = document.getElementById("video");
            videoRef.current.srcObject = stream;
            console.log("video is " + video)
            video.play();
            setisLoaded(true);
            addEvent();
          })
          .catch((e) => {
            console.log(e);
          });
      }
    });
    }, []);

      const addEvent = () => {
        console.log("Inside")
        const video = document.getElementById("video");
        video.addEventListener("play", () => {
          const canvas = faceapi.createCanvas(video);
          canvas.id = "canvas";
          document.querySelector("#video").append(canvas);
          document.body.append(canvas);
          const displaySize = { width:width, height:height };
          faceapi.matchDimensions(canvas, displaySize);
          setInterval(async () => {
            const detections = await faceapi.detectAllFaces('video', new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
            const resizedDetections = faceapi.resizeResults(detections, displaySize);
            canvas
              .getContext("2d")
              .clearRect(0, 0, canvas.width, canvas.height);
            faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
            if(resizedDetections[0].expressions && tracking) {
              setData(arr => [...arr, resizedDetections[0].expressions]);
            }
          }, 100);
        })
      }

setInterval函数中的if语句总是将跟踪状态变量求值为false。跟踪变量最初被设置为false,但我后来将状态更改为true(在一个未显示的函数中)。然而,setInterval函数仍然将跟踪变量求值为false。
有什么方法可以确保setInterval函数知道变量或状态何时更改?
我尝试使用localStorage变量,甚至useRef react钩子,但得到了相同的结果。我也尝试使用useInterval钩子,但没有工作。

p5fdfcr1

p5fdfcr11#

如果你的useEffect还没有满,那么查看完整的示例会很有帮助。我没有看到依赖项。你确定trackinguseEffect依赖项的一部分吗?
一般来说,useEffect不会更新不属于dependencies数组的变量的值。这很可能是这里的问题。
值得一提的是,将tracking添加为依赖项列表的一部分将导致您在更改时重新加载模型。因此您需要添加额外的检查或重构此useEffect。您可能还需要调用video.removeEventListener进行清理
文件:https://react.dev/reference/react/useEffect

相关问题