为什么在渲染react组件时，setTimout会在浏览器中显示一个随机整数，持续时间为timout，以及如何解决此问题

Question

在重定向之前，我在渲染方法中调用一个setTimeout来显示一条消息几秒钟，除了一个随机整数外，其他一切都正常工作，我假设它是收到的setTimout Id。如何从显示中删除此号码/id？

if(this.props.submitted === 'SUCCESS') {
return (
<div>
...
...
<div className="...">
{
setTimeout(() => {
this.props.history.push('/');
}, 20000);
}
</div>
</div>
)
} else {
.....
}

Answer 1

只需在返回之前执行setTimeout

Answer 2

这里需要注意的几件事：

1. setTimeout返回一个唯一的timeoutId，它就是您所看到的显示内容
2. 您不应该将setTimeout放在渲染函数中，也不应该放在函数组件返回的jsx中，因为每次组件重新渲染时，您都会再次调用setTimeout，这可能不是您想要的结果。相反，将setTimeout放在函数组件的useEffect内，或放在类组件的componentDidMount内

Answer 3

有趣的问题简短回答：没有问题长答案：当您设置超时或间隔时，会返回一个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

Answer 4

将setTimeout放入componentDidMount中并在componentWillUnmount上清除它就成功了。

componentDidMount() {
if(this.props.submitted === 'SUCCESS') {
timer1 = setTimeout(() => {
this.props.history.push('/');
}, 5000)
} 
}
componentWillUnmount() {
clearTimeout(timer1);
}