当我单击 MoviesList 组件中的 Card 组件时，Card 组件将我导航到 SingleMoviePage 组件，您可以看到流派、主演、发行日期、制作和明星部分的动画从左到右滑动。这些动画第一次出现在SinglePageComponent 工作正常，但如果我单击 SingleMoviePage 组件中电影下的类似电影，它会将我导航到另一个 SingleMoviePage 组件，但这次动画无法正常工作。为什么会发生这种情况？顺便说一句，我使用 scss。
Github 仓库：https://github.com/UmutPalabiyik/hope-movie-app 网站演示：https://hope-movie.web.app/page/1
【问题讨论】：
标签： javascript css reactjs redux sass
让我先解释一下原因。当应用程序导航到 SingleMoviePage 时，内部的每个动画组件，例如您的“流派”、“主演”等，都会第一次被渲染。因此应用了滑动效果。然后当点击“类似电影”卡片组件时，看起来应用程序会将您带到另一个页面，但事实并非如此。您所有的滑动元素都基于本地状态movieDetails。单击“类似电影”卡片时，此状态会更新，然后触发重新渲染。 React 只是比较差异并重新渲染有什么不同。而且由于只有文本不同，因此元素永远不会被替换（卸载+安装）。因此不再有滑动效果。
这是一个简单的解决方案。在这些元素中添加唯一的keys。 React 使用键来确定更改。参考：https://reactjs.org/docs/lists-and-keys.html#keys。例如，我看到您的movieId 是唯一标识符。尝试将key={movieId} 添加到您的stars div。 When a "similar movie" is selected, this key will change which will signal React to replace the div.新的 div 将应用滑动效果。
【讨论】：