渲染或显示组件时如何重置反应状态？

Question

我正在尝试在我的应用程序中执行分页部分，但数据是正确的，但唯一的问题是当我尝试调用或显示组件时，即 Trending.jsx 单击 按钮（最受欢迎） 和（切换按钮的类型），起初它获得正确的页码，但是当我隐藏那个 Trending.jsx 组件页码保持不变，在我的默认 page/component 上是 Movie.jsx

但是，如果组件未显示，我想重置页码，并在用户点击查看时从 1 开始 Trending.jsx 并且反之亦然

请参阅 link 到 代码沙盒 以获取我尝试过的代码。 https://codesandbox.io/s/moviehunt-demo-forked-rhom0?file=/src/components/Movies/Movies.jsx

完整的实时应用程序： https://rhom0.csb.app/movies

感谢您的帮助。

Answer 1

据我了解，问题是在电影和趋势之间来回切换时，页码没有重置为 1。

因此，我创建了一个依赖于状态的 useEffect：showTrending，其中我只是将页码更新回 1。

useEffect(() => {
    setPage(1);
}, [showTrending, setPage]);

另外，为了更新分页中的页码，我将页面作为属性传递给 PageNav，以便它自动更新。我希望这是您正在寻找的解决方案。

代码沙箱：https://codesandbox.io/s/moviehunt-pagination-solution-hsc0f/?file=/src/components/Movies/Movies.jsx:2304-2305

直播：https://hsc0f.csb.app/movies

此外，我建议为最流行 按钮添加一些样式，以便在打开和关闭时一目了然。

渲染或显示组件时如何重置反应状态？

How to reset the state in react when component is rendered or shown?

javascript

reactjs

react-hooks

use-state