React JS setInterval不工作，也没有将我的状态重置为0

Question

我想问一下我的setInterval函数。我想为我的报价组件做一些类似旋转木马的自动滚动。

问题：setInterval将我的currQuote状态从0增加到1，然后停止在1，并且没有像else语句中编码的那样设置回0。

SOLVED：谢谢大家。这是一个非常愚蠢的错误。我没有添加useEffect的依赖项。难怪它只运行一次XD

const Quote = () => {
const [currQuote, setCurrQuote] = useState(0);
const timerQuote = useRef();
useEffect(() => {
timerQuote.current = setInterval(() => {
if (currQuote < quoteList.length - 1) {
setCurrQuote(currQuote + 1);
} else {
setCurrQuote(0);
}
// console.log(currQuote);
}, 2000);
// dispose when unmount
return () => {
clearInterval(timerQuote.current);
};
}, []);
useEffect(() => {
console.log(currQuote);
}, [currQuote]);
return(.......)

Answer 1

就像Yousaf评论的那样，您需要将currQuote添加到useEffect的依赖数组中，如下所示：

useEffect(() => {
timerQuote.current = setInterval(() => {
console.log(currQuote)
if (currQuote < quoteList.length - 1) {
setCurrQuote(currQuote + 1);
} else {
setCurrQuote(0);
}
// console.log(currQuote);
}, 2000);
// dispose when unmount
return () => {
clearInterval(timerQuote.current);
};
}, [currQuote]);

此处的工作示例：https://codesandbox.io/s/morning-architecture-rgwgoz?file=/src/App.js