React setTimeout 立即发生，而不是 3 秒后

Question

我会尝试再解释一次这个问题（已解决）作为练习 post 在 Whosebug 上写作。我想在我的网站上正确登录后，显示用户已正确登录的文本，并且3 秒后重定向到带有 posts.My 代码的页面立即重定向。我的旧代码的重要事项：

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

我希望我的 post 现在好多了。真诚的

Answer 1

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

示例：

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={'/'} />}

React setTimeout 立即发生，而不是 3 秒后

React setTimeout takes place immediately not after 3 seconds

reactjs