next.js 中的无限 requestAnimationFrame 循环

Question

我正在尝试在next.js https://codelabs.developers.google.com/tensorflowjs-transfer-learning-teachable-machine#0中重新创建此应用程序

为了开始数据收集，我在按钮上添加了一个onMouseDown MouseEvent ，触发以下代码：

const handleGatherDataForClass: MouseEventHandler = (e) => {
  let classNumber = parseInt(e.target.getAttribute('data-1hot'));
  console.log('inside EventHandler:', { classNumber });
  let state = gatherDataState === STOP_DATA_GATHER ? classNumber : STOP_DATA_GATHER;
  console.log({ state });
  setGatherDataState(state);
};

在哪里

• classNumber = 正 integer

• STOP_DATA_GATHER = -1

• gatherDataState = -1 （默认）

这是工作应用程序的原始代码片段： https://codelabs.developers.google.com/tensorflowjs-transfer-learning-teachable-machine#11

在gatherDataState变量的state改变后， useEffect钩子应该运行dataGatherLoop function，它从视频ZF7B44CFAFD5C52223D5498196C8A2E7B中取帧并转换成张量：

useEffect(() => {
  dataGatherLoop();
}, [gatherDataState]);


function dataGatherLoop() {
  console.log('inside Loop: ', {
    gatherDataState
  });

  if (videoPlaying && gatherDataState !== STOP_DATA_GATHER) {
    let imageFeatures = tf.tidy(function() {
      let videoFrameAsTensor = tf.browser.fromPixels(VIDEO);
      let resizedTensorFrame = tf.image.resizeBilinear(
        videoFrameAsTensor, [MOBILE_NET_INPUT_HEIGHT, MOBILE_NET_INPUT_WIDTH],
        true
      );
      let normalizedTensorFrame = resizedTensorFrame.div(255);
      return mobilenet.predict(normalizedTensorFrame.expandDims()).squeeze();
    });
    imageFeatures.print();

    setTrainData((prev) => ({
      trainX: [...prev.trainX, imageFeatures],
      trainY: [...prev.trainY, gatherDataState],
    }));

    // Intialize array index element if currently undefined.
    let newCount = [...examplesCount];
    if (examplesCount[gatherDataState] === undefined) {
      newCount[gatherDataState] = 1;
      setExamplesCount(newCount);
    } else {
      newCount[gatherDataState]++;
      setExamplesCount(newCount);
    }


    window.requestAnimationFrame(dataGatherLoop);
  }
}

只要gatherDataState变量是正数integer（不等于-1 ），此循环就会运行。释放鼠标按钮后，将触发一个onMouseUp事件，该事件运行与onMouseDown事件相同的handleGatherDataForClass function。 这应该将 state 改回-1并因此停止循环。

问题：
即使在触发onMouseUp事件后 state 变为-1 ， gatherDataState最终每次都是正 integer ..因此循环不会停止。 （代码中的其他任何地方都没有setGatherDataState function）

我试过了：

• 在handleGatherDataForClass事件处理程序中编写gatherDataLoop function并将gatherDataState变量作为参数传递
• 使用gatherDataState的全局变量而不是反应state来保存当前的gatherDataState
• 使用cancelAnimationFrame function 取消requestAnimationFrame循环（全局保存 id 并保存为状态）

Answer 1

我不确定为什么，但是

• 使用 useRef 存储在 requestAnimationFrame 循环中使用的值，以及用于取消循环的 id 和
• 从 useEffect Hook 中取出循环并将其写入 ClickEventhandler

为我工作。 这是代码：

 const handleGatherDataForClass: MouseEventHandler = (e) => {
    let classNumber = parseInt(e.target.getAttribute('data-1hot'));
    gatherDataStateRef.current = classNumber;
    isCollectingRef.current = !isCollectingRef.current;
    if (isCollectingRef.current) {
      collectRequestRef.current = requestAnimationFrame(dataGatherLoop);
    } else {
      cancelAnimationFrame(collectRequestRef.current);
    }
  };


function dataGatherLoop() {
    console.log('inside Loop: ', gatherDataStateRef.current);

    let imageFeatures = tf.tidy(function () {
      let videoFrameAsTensor = tf.browser.fromPixels(VIDEO);
      let resizedTensorFrame = tf.image.resizeBilinear(
        videoFrameAsTensor,
        [MOBILE_NET_INPUT_HEIGHT, MOBILE_NET_INPUT_WIDTH],
        true
      );
      let normalizedTensorFrame = resizedTensorFrame.div(255);
      return mobilenet.predict(normalizedTensorFrame.expandDims()).squeeze();
    });
    imageFeatures.print();

    setTrainData((prev) => ({
      trainX: [...prev.trainX, imageFeatures],
      trainY: [...prev.trainY, gatherDataStateRef.current],
    }));

    if (examplesCountRef.current[gatherDataStateRef.current] === undefined) {
      examplesCountRef.current[gatherDataStateRef.current] = 1;
    } else {
      examplesCountRef.current[gatherDataStateRef.current] += 1;
    }

    collectRequestRef.current = requestAnimationFrame(dataGatherLoop);
  }