渲染 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(()=>{&nbsp; console.log("this message will never show")},10000)//10 secondsvar i=1var interval1=setInterval(()=>{&nbsp; console.log(i)&nbsp; if(i>7){&nbsp; &nbsp; console.log("sikeee, I END IT NOW")&nbsp; &nbsp; clearTimeout(timer1)&nbsp; &nbsp; clearInterval(interval1)&nbsp; }i++},1000)//1 second

Answer 2

将 setTimeout 放在 componentDidMount 内部并在 componentWillUnmount 上清除它就可以了。componentDidMount() {&nbsp; if(this.props.submitted === 'SUCCESS') {&nbsp; &nbsp; timer1 = setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.props.history.push('/');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, 5000)&nbsp; }&nbsp;}componentWillUnmount() {&nbsp; clearTimeout(timer1);}

Answer 3

这里需要注意几点：setTimeout 返回一个唯一的值timeoutId，这就是您所看到的显示内容。你不应该将 setTimeout 放在渲染函数内部，也不应该放在从功能组件返回的 jsx 中，因为每次组件重新渲染时，你都会再次调用 setTimeout，这可能不是你想要的结果。useEffect相反，对于功能组件，请将 setTimeout 放在 a 内部，或者componentDidMount对于类组件，将 setTimeout 放在 a 内部。

Answer 4

只需在返回之前执行 setTimeout