我在渲染方法中调用 setTimeout 来在重定向之前显示一条消息几秒钟，并且一切正常，除了一个随机整数（我假设它是收到的 setTimout Id）。如何删除此号码/ID 的显示？if(this.props.submitted === 'SUCCESS') { return ( <div> ... ... <div className="..."> { setTimeout(() => { this.props.history.push('/'); }, 20000); } </div> </div> )} else { .....}
4 回答
白猪掌柜的
TA贡献1893条经验 获得超10个赞
有趣的问题 简短的回答：没有问题 详细的回答：当您设置超时或间隔时，会返回一个 id（是的，那个数字）。为什么返回id？能够清除超时或间隔。让我向您展示返回的 id 的示例
var timer1=setTimeout(()=>{
console.log("this message will never show")
},10000)//10 seconds
var i=1
var interval1=setInterval(()=>{
console.log(i)
if(i>7){
console.log("sikeee, I END IT NOW")
clearTimeout(timer1)
clearInterval(interval1)
}i++
},1000)//1 second
倚天杖
TA贡献1828条经验 获得超3个赞
将 setTimeout 放在 componentDidMount 内部并在 componentWillUnmount 上清除它就可以了。
componentDidMount() {
if(this.props.submitted === 'SUCCESS') {
timer1 = setTimeout(() => {
this.props.history.push('/');
}, 5000)
}
}
componentWillUnmount() {
clearTimeout(timer1);
}
Qyouu
TA贡献1786条经验 获得超11个赞
这里需要注意几点：
setTimeout 返回一个唯一的值
timeoutId，这就是您所看到的显示内容。你不应该将 setTimeout 放在渲染函数内部，也不应该放在从功能组件返回的 jsx 中，因为每次组件重新渲染时，你都会再次调用 setTimeout，这可能不是你想要的结果。
useEffect相反，对于功能组件，请将 setTimeout 放在 a 内部，或者componentDidMount对于类组件，将 setTimeout 放在 a 内部。
添加回答
举报
0/150
提交
取消