我试图在clearTimer
方法中访问clearTimerInterval
,但是得到了未定义的结果,得到了警告React Hook内部变量在每次渲染后都会丢失
。在下面的代码中,useEffect
钩子只被调用一次,那么为什么变量clearTimerInterval
会变成未定义呢?
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);