reactjs - 使用 TransitionGroup 进行动画时，componentDidMount 会触发两次

Question

我目前正在react-transition-group与 结合使用react-router-dom来动画路线更改，这工作正常。

我遇到的唯一问题是，当切换路由并且我需要在componentDidMount生命周期挂钩中发送或获取一些数据时，它会触发两次。我很确定这是由于，react-transition-group但我想知道这个问题是否有明显的解决方案。

我发现了这一点，因为它两次在数据库中插入一个实体，这与预期的行为相去甚远。

登录转换示例componentDidMount

Answer 1

我发现这是我的Switch组件的问题，请参阅此 github 问题

基本上，您需要包装组件location中的道具。Switch

Answer 2

这是来自 github 问题的片段，因此您不必点击。

将位置添加到 Switch：<Switch location={location}>

<TransitionGroup component="main">
  <CSSTransition
    key={location.pathname}
    timeout={timeout}
    exit={false}
    classNames="fade">
    <Switch location={location}> // <- Here it is!
      <Route exact path="/" component={Home} />
      <Route path="/blog" component={BlogList} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route component={NotFound} />
    </Switch>
  </CSSTransition>
</TransitionGroup>