在使用 history.push 更改路由之前，React 状态未应用于正确的状态

Question

我正在尝试使用成帧器运动应用正确的退出动画。退出动画将取决于用户在哪里（路线）和用户下一步要去哪里（下一条路线）。简单地说，我不希望背景滑开，除非用户专门从路线 A 到路线 D。

为了解决这个问题，我已经从 react-router-dom 中省略了我的链接远离Link 并实现了useHistory，这样我就可以在用户被引导之前更改状态。该状态旨在告诉背景是否进行转换。

问题：状态更改太慢。就好像每次我用这种方法改变路线时，状态都会落后一步。例如，如果我希望当用户从路由 A 到 D 时状态 (bgAnimate) 为真，那么当页面被定向时它将为假。那么在用户已经被引导之后，状态将是真实的。结果，动画失败。

我尝试过的：我尝试在状态更改之后和history.push() 之前添加延迟。同样的问题。以下是用户单击要定向的链接时执行的代码。控制台日志将返回它需要的 OPOSITE（因为状态设置太慢？？不确定）。

  // Initialize history
  let history = useHistory()
  const delay = ms => new Promise(res => setTimeout(res, ms));

  // Change state to change background based on where we are now and where we're headed
  const bgAnimateThenRoute = async (button) => {
    if(button === 'bio') {
      setBgAnimate(true)
      await delay(1000)
      console.log(bgAnimate)
      history.push('/')
    } else if(button === 'projects') {
      setBgAnimate(false)
      await delay(1000)
      console.log(bgAnimate)
      history.push('/projects')
    }
  }

我们将不胜感激任何替代解决方案。感谢您的宝贵时间。

Answer 1

延迟确实解决了问题。只是控制台日志没有选择正确的状态。动画效果很好。