栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在setInterval中使用React状态挂钩时状态未更新

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在setInterval中使用React状态挂钩时状态未更新

原因是传递给

setInterval
的闭包中的回调仅访问
time
第一个渲染器中的变量,而无法访问
time
后续渲染器中的新值,因为
useEffect()
第二次未调用。

time``setInterval
回调中的值始终为0 。

就像

setState
您熟悉的状态挂钩一样,状态挂钩有两种形式:一种是处于更新状态的状态,另一种是将当前状态传入的回调形式。您应该使用第二种形式,并读取
setState
回调中的最新状态值以在递增之前,请确保您具有最新的状态值。

奖励:替代方法

Dan Abramov

setInterval
在他的博客文章中深入探讨了有关使用钩子的主题,并提供了解决此问题的替代方法。强烈建议阅读!

function Clock() {  const [time, setTime] = React.useState(0);  React.useEffect(() => {    const timer = window.setInterval(() => {      setTime(prevTime => prevTime + 1); // <-- Change this line!    }, 1000);    return () => {      window.clearInterval(timer);    };  }, []);  return (    <div>Seconds: {time}</div>  );}ReactDOM.render(<Clock />, document.querySelector('#app'));<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script><div id="app"></div>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/425773.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号