Javascript 使用TensorflowJS/React网络摄像头时出现React挂钩问题

当我试图更新我的状态时，我的应用程序出现了问题。我正在为班级开发一个健身应用程序，在这一点上我想计算下蹲。我正在使用tensorflowJS和react网络摄像头进行身体定位，然后根据用户的位置确定他们何时“向下”然后“向上”。如果他们这样做，计数器将递增。我可以将此记录到控制台，它工作正常-但是-当我尝试使用state执行此操作时，它最终会使应用程序崩溃。任何帮助都会很好

import React, { useRef, useState, useEffect } from 'react';
// import '../public/style.css';
import * as tf from '@tensorflow/tfjs';
import * as posenet from '@tensorflow-models/posenet';
import Webcam from 'react-webcam';
// import Counter from './Counter';

const Squat = () => {
  const [counter, setCounter] = useState(0);
  const webcamRef = useRef(null);

  const runPosenet = async () => {
    const net = await posenet.load({
      inputResolution: { width: 200, height: 200 },
      scale: 0.1,
    });
    setInterval(() => {
      detect(net);
    }, 100);
  };

  let array = [];
  let count = 0;
  let obj = {};
  let position = '';
  let positionArr = [];

  const detect = async (net, avgPosition = array, helperObj = obj) => {
    if (
      typeof webcamRef.current !== 'undefined' &&
      webcamRef.current !== null &&
      webcamRef.current.video.readyState === 4
    ) {
      // Get Video Properties
      const video = webcamRef.current.video;
      const videoWidth = webcamRef.current.video.videoWidth;
      const videoHeight = webcamRef.current.video.videoHeight;

      //Set video width
      webcamRef.current.video.width = videoWidth;
      webcamRef.current.video.height = videoHeight;

      // Make Detections
      const pose = await net.estimateSinglePose(video);
      let leftShoulder = pose.keypoints[5].position.y;
      let rightShoulder = pose.keypoints[6].position.y;

      // Calculate user position
      const calculateAvg = (avgPosition, helperObj) => {
        if (pose.score > 0.5 && count <= 50) {
          avgPosition.push(leftShoulder);
          avgPosition.push(rightShoulder);
          const sum = avgPosition.reduce((a, b) => a + b, 0);
          helperObj.avg = sum / avgPosition.length || 0;
          helperObj.count = count;
          count++;
          return helperObj;
        } else {
          return helperObj;
        }
      };

      //Once user positition is calculated, use position to determine up and down
      const squat = () => {
        let squatObj = calculateAvg(avgPosition, helperObj);
        if (squatObj.count === 50) {
          console.log('running');
          if (leftShoulder && rightShoulder <= squatObj.avg + 50) {
            position = 'up';
          } else {
            position = 'down';
          }
        }
      };

      //Run function when pose score is good and avg is calculated
      if (pose.score > 0.4 && squat()) {
        squat();
      }
    }
  };

  const countFunc = () => {
    setInterval(() => {
      //let squatCounter = 0; for console.log
      if (position) {
        positionArr.push(position);
        console.log(positionArr);
        for (let i = 0; i < positionArr.length; i++) {
          if (positionArr[i - 1] === 'down' && positionArr[i] === 'up') {
            //squatCounter++; - for console.log
            setCounter(counter + 1);
          }
        }
        //console.log(squatCounter) - logs accurate number
      }
    }, 3000);
  };

  countFunc();
  runPosenet();
  return (
    <div>
      <div className="Squat">
        <header className="Squat-header">
          <Webcam
            ref={webcamRef}
            style={{
              position: 'absolute',
              marginLeft: 'auto',
              marginRight: 'auto',
              left: 0,
              right: 0,
              textAlign: 'center',
              zindex: 9,
              width: 480,
              height: 240,
            }}
          />
        </header>
      </div>
      Count: {counter}
    </div>
  );
};

export default Squat;

import React，{useRef，useState，useffect}来自'React'；
//导入“../public/style.css”；
从“@tensorflow/tfjs”导入*作为tf；
从“@tensorflow models/posenet”导入*作为posenet；
从“react网络摄像头”导入网络摄像头；
//从“./Counter”导入计数器；
常量深蹲=（）=>{
const[counter，setCounter]=useState（0）；
const webcamRef=useRef（null）；
const runPosenet=async（）=>{
const net=等待posenet.load({
输入解析：{宽度：200，高度：200}，
比例：0.1，
});
设置间隔（（）=>{
检测（网络）；
}, 100);
};
让数组=[]；
让计数=0；
设obj={}；
让位置=“”；
设positionArr=[]；
const detect=async（net，avgPosition=array，helperObj=obj）=>{
如果(
webcamRef.current的类型！=“未定义”&&
webcamRef.current！==null&&
webcamRef.current.video.readyState==4
) {
//获取视频属性
const video=webcamRef.current.video；
const videoWidth=webcamRef.current.video.videoWidth；
const videoHeight=webcamRef.current.video.videoHeight；
//设置视频宽度
webcamRef.current.video.width=视频宽度；
webcamRef.current.video.height=视频高度；
//侦察
const pose=wait net.estimateSinglePose（视频）；
让leftShoulder=pose.keypoints[5]。position.y；
让右肩=姿势。关键点[6]。位置。y；
//计算用户位置
const calculateAvg=（avgPosition，helperObj）=>{
如果（姿势得分>0.5&&计数a+b，0）；
helperObj.avg=sum/avgPosition.length | | 0；
helperObj.count=计数；
计数++；
返回helperObj；
}否则{
返回helperObj；
}
};
//计算用户位置后，使用位置确定上下位置
常量深蹲=（）=>{
设luckobj=calculateAvg（avgPosition，helperObj）；
如果（luckobj.count==50）{
console.log（'running'）；
if（左肩和右肩0.4和下蹲（）{
下蹲（）；
}
}
};
常量countFunc=（）=>{
设置间隔（（）=>{
//设lunkcounter=0；对于console.log
如果（职位）{
位置推送（位置）；
控制台日志（位置arr）；
for（设i=0；i