使用useState和useEffect挂钩时出现问题
import { useState, useEffect } from "react";
const counter = ({ count, speed }) => {
const [inc, setInc] = useState(0);
useEffect(() => {
const counterInterval = setInterval(() => {
if(inc < count){
setInc(inc + 1);
}else{
clearInterval(counterInterval);
}
}, speed);
}, [count]);
return inc;
}
export default counter;
Run Code Online (Sandbox Code Playgroud)
上面的代码是一个计数器组件,它需要用props进行计数,然后用0初始化inc并递增它直到等于count
问题是我每次获得0时,都没有在useEffect和setInterval的回调中获得inc的更新值,因此它将inc呈现为1,而setInterval却永远不会清除。我认为inc必须在useusefffect和setInterval的回调函数的结尾处,所以我必须在那儿获得update inc,所以这可能是一个错误吗?
我不能在依赖项中传递inc(在其他类似问题中建议),因为在我的情况下,我在useEffect中设置了setInterval,因此在依赖项数组中传递inc会导致无限循环
我有一个使用有状态组件的有效解决方案,但是我想使用功能组件来实现