我正在使用带有脚本的react 16.10。我有以下代码：
const [state, setState] = useState<State>({
test: 1
});
//On component mount we start our interval
useEffect(() => {
const timerID = setInterval(timer, 5000); //every 5 seconds
return function cleanup() {
//When we leave component we stop the timer
clearInterval(timerID);
};
}, []);
function timer() {
if(state.test === 3){
//HE WILL NEVER ENTER THIS CODE FUNCTION
}
setState({...state, test: 3}); // Next time we should have the value 3, BUT IT HAS NEVER THIS VALUE?!?!
}
return (
<>
<span>The output is {state.test}</span> //First it is showing 1, after 5 seconds 3. Working great
</>
);
我将test的值更改为间隔“ timer”中的数字3。setState工作正常。我可以在组件中看到该值，看到数字从1切换到3。
但是在计时器功能中，该值永远不会更改。每次默认值为1。
我做错了什么？
您需要添加依赖项 useEffect
//On component mount we start our interval
useEffect(() => {
const timerID = setInterval(timer, 5000); //every 5 seconds
return function cleanup() {
//When we leave component we stop the timer
clearInterval(timerID);
};
}, [state.test]); // <- here add dependency
原因
当安装了组件并存储了timer函数引用时，效果函数仅被调用一次。现在当你状态改变的时候你timer function也updated outside不会inside of useEffect。
useEffect仍然使用旧的参考，当state was 1使inside it State always going to be 1该referred timer function
现在，当您通过state.test依赖时。状态更改后，您的效果将更新，现在开始使用timer function具有新状态的new。
因此，现在您可以在中更新状态了timer function。并且您的状况可以正确评估。
如有任何疑问，请发表评论。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句