在使用 TransitionGroup 时,转换中可能存在状态不一致性

作者: CircuitCoder创建于 2025年8月8日更新于 2025年8月8日

> 当前行为是什么? 一个 (已删除) 过渡的状态在从 TransitionGroup 中删除后可能卡在 `entering` 状态中。不幸的是,我尚未能够生成一个易于使用的 MVP。要重现此问题,请查看此问题的结尾。 奇怪的是,似乎根本原因是 Transition 的 `componentDidUpdate` 钩子的 `prevProps` 在未被调用的情况下被更改,或者是有人直接更新 props 对象,或者是 React 以某种方式遗漏了渲染。问题在于,此 `Transition` 的 `in` 属性由 `TransitionGroup` 管理,因此对 `in` 属性的每次更新都一定会导致 (至少) 一次 `componentDidUpdate` 调用。 如果我们在 `componentDidUpdate` 的开始处添加一个日志(为了方便起见,我直接编辑了编译后的版本): <img width="1693" height="200" alt="Image" src="https://GitHub.com/user-attachments/assets/e12a99dc-ecb7-4d54-acec-c4ffbfc7161e" /> 我们可以看到,过渡处于 `entering` 状态,且 `prevProps === this.props`,但 `this.props.in === false`。 <img width="769" height="349" alt="Image" src="https://GitHub.com/user-attachments/assets/99f82c59-9bd5-487d-8a54-de61d4405d56" /> > 预期行为是什么? 状态应该正确更新。 > 重现问题 此问题在 https://GitHub.com/jesec/flood 中表现,其中加载覆盖有时无法隐藏。特别是,在成功登录或退出后,加载覆盖总是保持不变。相关代码位于 https://GitHub.com/jesec/flood/blob/25fe901c32b99eb68feed5e0abe2071b6420aec2/client/src/JavaScript/components/AppWrapper.tsx#L77-L83。 我未能在简化的环境中重现此错误。因此,此问题可能与组件树的上层有关,以及它们如何管理树。因此,为上下文,我认为可能涉及的其他组件包括: - React 版本:18.3.1 - Mobx:使用 react 集成,7.6.0 - React-router-dom:使用路由,但上层没有 `Route`。 6.30.1 > 需要帮助 一个简单的解决方案是删除 https://GitHub.com/reactjs/react-transition-group/blob/master/src/Transition.js#L183 中的 `prevProps === this.props` 检查,并且在不需要时跳过状态更新。我可以确认此解决方案解决了问题。但鉴于这并没有解决根本原因,这可能是不令人满意的。 我怀疑为了进一步跟踪此错误,需要更多日志。我可以提供哪些日志来帮助维护者解决此问题?

内容来源: reactjs/react-transition-group