渲染 React 组件时，为什么 setTimout 在超时时间内在浏览器中显示随机整数以及如何解

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

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

将 setTimeout 放在 componentDidMount 内部并在 componentWillUnmount 上清除它就可以了。

componentDidMount() {

  if(this.props.submitted === 'SUCCESS') {

    timer1 = setTimeout(() => {

               this.props.history.push('/');

             }, 5000)

  } 

}

componentWillUnmount() {

  clearTimeout(timer1);

}

Answer 3

这里需要注意几点：

1. setTimeout 返回一个唯一的值timeoutId，这就是您所看到的显示内容。

2. 你不应该将 setTimeout 放在渲染函数内部，也不应该放在从功能组件返回的 jsx 中，因为每次组件重新渲染时，你都会再次调用 setTimeout，这可能不是你想要的结果。useEffect相反，对于功能组件，请将 setTimeout 放在 a 内部，或者componentDidMount对于类组件，将 setTimeout 放在 a 内部。

Answer 4

只需在返回之前执行 setTimeout