"setInterval" 中的函数不会从钩子接收更新的变量

Question

在使用效果钩子中，我设置了间隔，即运行函数"calculateCircle"。 在那里我做了一些逻辑，包括设置状态(使用useState-Hook(。 来自钩子的变量被更新，我渲染并在页面上看到它们，但这个函数一直在安慰旧值。

我将组件更改为基于类的组件(没有钩子(，现在一切正常。 但我想知道使用钩子的问题是什么。

const Features = () => {
const block1 = React.createRef();
const shadowText = React.createRef();
const [ mouseIn, setMouseIn ] = useState(false);
const [ xCircle, setXCircle] = useState(-50);
const calculateCircle = () => {
console.log('mouseIn :', mouseIn); //never changes, but in page - yes
if (!mouseIn) {  //never skips this loop
console.log('begin', xCircle);//always the same            
let r = 50;
let yCircle = Math.sqrt(r*r - xCircle*xCircle);
if (shadowText.current) draw(xCircle, yCircle);
setXCircle(prev => {
console.log('xCircle:', prev);
return prev > 50 ? -50 : prev + 1
});            
console.log('end', xCircle, yCircle);
}            
} //on page I see that xCircle changes correctly
useEffect(() => {
const cycle = setInterval(() => calculateCircle(), 1000);
return () => {
clearInterval(cycle);
}
}, []);

没有钩子它可以工作;

Answer 1

由于 calculateCircle 实例最初只是从 useEffect 钩子中引用的，因此它在创建此函数时从闭包中获取 xCircle 和 mouseIn 值，对于 setInterval 来说，这是在初始调用时。

您需要将第二个参数传递给 useEffect，以便在 xCircle 或鼠标更改中再次创建此方法

const Features = () => {
const block1 = React.createRef();
const shadowText = React.createRef();
const [ mouseIn, setMouseIn ] = useState(false);
const [ xCircle, setXCircle] = useState(-50);
const calculateCircle = () => {
console.log('mouseIn :', mouseIn); //never changes, but in page - yes
if (!mouseIn) {  //never skips this loop
console.log('begin', xCircle);//always the same            
let r = 50;
let yCircle = Math.sqrt(r*r - xCircle*xCircle);
if (shadowText.current) draw(xCircle, yCircle);
setXCircle(prev => {
console.log('xCircle:', prev);
return prev > 50 ? -50 : prev + 1
});            
console.log('end', xCircle, yCircle);
}            
} //on page I see that xCircle changes correctly
useEffect(() => {
const cycle = setInterval(() => calculateCircle(), 1000);
return () => {
clearInterval(cycle);
}
}, [mouseIn, xCircle]);