Question

我将尝试再解决一次此问题（已解决），以便在stackoverflow上进行练习。我想在正确登录我的网站后显示显示用户已正确登录并在3秒钟后重定向的文本我的代码立即被重定向。旧代码的重要内容：

const Register = () => {
...
const goLoginPage = () => {
 return <div>setTimeout(() => {<Redirect to="/" />}, 3000);</div>;
};
...
return(
  {isError == false && (
    <div> 
      <p className="successMessage">Logged in</p>
      {goLoginPage()}
   </div>
)}
)

希望我的帖子现在更好。

Answer 1

一种可能的解决方案是使用状态，该状态将告诉render方法是否应渲染重定向组件。

示例：

const YourComponent = () => {
  ... 
  const [timeToRedirect, setTimeToRedirect] = useState(false);

  useEffect(() => {
    setTimeout(() => setTimeToRedirect(true), 3000)
  }, []);

  return (
    <div>
      ...
      {timeToRedirect && <Redirect to="/" />
    </div>
  )
}

Answer 2

您可以像这样初始化状态

  state = {
        delyaRedirect: false
    }

setTimeout(() => {
        this.setState({ delyaRedirect: true })
    }, 3000);

并使用条件渲染

{this.state.delyaRedirect && <Redirect to={'/'} />}

反应setTimeout不会在3秒后立即发生

2 个答案: