Javascript 无法使用react挂钩外部的变量清除间隔

我试图在

clearTimer

方法中访问

cleartimernterval

，但由于未定义，因此从内部获取的waring

变量在每次渲染后都会丢失。在下面的代码
useffect
hook调用一次，那么变量
cleartimernterval
是如何未定义的呢

function Child(props) {
          let [timerCount, setTimer] = useState(0);
          var clearTimerInterval;
          useEffect(() => {
            clearTimerInterval = setInterval(() => {
              setTimer(timerCount => {
                return timerCount + 1;

              });
            }, 1000);
            return () => {
              clearInterval(clearTimerInterval);
            };
          }, []);

          function clearTimer() {
            clearInterval(clearTimerInterval);
          }
          return (
            <div>
              <div>Timer {timer}</div>
              <button onClick={clearTimer}>ClearTimer</button>
            </div>
          );
        }

        export default React.memo(Child);

函数子（道具）{
让[timerCount，setTimer]=useState（0）；
var clearTimerInterval；
useffect（（）=>{
clearTimerInterval=setInterval（（）=>{
设置计时器（计时器计数=>{
返回时间计数+1；
});
}, 1000);
return（）=>{
clearInterval（clearTimerInterval）；
};
}, []);
函数clearTimer（）{
clearInterval（clearTimerInterval）；
}
返回(
计时器{Timer}
清除计时器
);
}
导出默认反应备忘录（子项）；
尝试在钩子内部定义变量


          useEffect(() => {
          var clearTimerInterval;
            clearTimerInterval = setInterval(() => {
              setTimer(timerCount => {
                return timerCount + 1;

              });
            }, 1000);
            return () => {
              clearInterval(clearTimerInterval);
            };
          }, []);

如果需要跨重新渲染保存变量，请使用在本例中类似于类实例字段的变量，还请注意，REF的突变不会触发重新渲染

这将使您能够从
useffect

函数子（道具）{
让[timerCount，setTimer]=useState（0）
const intervalRef=useRef（空）
useffect（（）=>{
intervalRef.current=setInterval（（）=>{
设置计时器（prevState=>prevState+1）
}, 1000)
return（）=>clearInterval（intervalRef.current）
}, [])
函数clearTimer（）{
清除间隔（间隔参考电流）
intervalRef.current=null
}
返回(
计时器{timerCount}
清除计时器
)
}
这是否回答了您的问题？