反应分页组件答案

【问题标题】：React pagination component反应分页组件
【发布时间】：2021-09-14 02:53:04
【问题描述】：

它是一个电影搜索/查找器，带有分页组件。

分页当前无法按方面工作。

问题：点击电影的分页总是一样的。

对不起codepen，我是新手，有点迷茫。

https://codepen.io/davide77/pen/xxrRdZR?editors=1010

<div className="pagination-container">
<div className="pagination-left">
  <span>{total} results found</span>
</div>
<div className="pagination-right">
  <div className="pagination-current">
    Page {pageNo + 1} of {maxPages}
  </div>
  <div className="pagination-buttons">
    <div className="pagination-button-wrapper">
      <button onClick={onPrev} className="pagination-button">
        &lt;
      </button>
    </div>
  </div>
  <div className="pagination-buttons">
    <div className="pagination-button-wrapper">
      <button onClick={onNext} className="pagination-button">
        &gt;
      </button>
    </div>
  </div>
</div>

【问题讨论】：

标签： reactjs

【解决方案1】：

您的useEffect 有问题。你写道：

useEffect(() => {
    getMovies();
  }, [pageNo]);

但应该是：

useEffect(() => {
   getMovies(keyword, pageNo);
}, [pageNo, keyword]);

为什么？因为每次更改 pageNo 时，useEffect 都会被触发，但如果你不将新页面值传递给函数，getMovies 将始终返回第一页的电影。

那么当然pageNo应该从1开始：

const [pageNo, setPageNo] = useState(1);

当然你应该改变这个div（不是必须做pageNo - 1）

<div className="pagination-current">
Page {pageNo} of {maxPages}
</div>

Here你的codepen已修改。

【讨论】：

非常感谢，您是否也知道为什么电影搜索不再起作用了？例如，如果我搜索蝙蝠侠...
@user173420 是的，因为我没有看到您也在搜索 keywork。我更新了答案和codepen。检查它是否正确并告诉我=)
@user173420 我现在正在检查。我会尽快更新你。
@user173420 上一个按钮的 disabled 属性不正确。你写了disabled={pageNo === 0}，但随着我的改变，现在pageNo从1开始。所以只需以这种方式更改上一个按钮：<button onClick={onPrev} className="pagination-button" disabled={pageNo === 1}>，问题就消失了。 Here 新的密码笔。
@user173420 不，我没有检查。给我更多时间，我会更新你=）

【解决方案2】：

只需使用 react-bhx-pagination 即可轻松传递 json 或端点。一切都会好起来的

回购：react-bhx-pagination

示例：Online Demo

【讨论】：