0

我还在学习反应钩子,所以请耐心等待;我正在编写一个自定义服务器端分页组件;然后 for 循环浏览页面以像这样呈现它们:

const [activePageNumber, setActivePageNumber] = useState(1);

   for (var i = 1; i <= pages; i++) {
      if (activePageNumber > 0 && i == activePageNumber)
        rows.push(
          <li
            key={i}
            className="paginate_button page-item active"
            onClick={() => {
              setActivePageNumber(i);
              console.log(activePageNumber);
            }}
          >
            <a className="page-link">{i}</a>
          </li>
        );
      else
        rows.push(
          <li
            key={i}
            className="paginate_button page-item"
            onClick={() => {
              setActivePageNumber(i);
              console.log(activePageNumber);
            }}
          >
            <a className="page-link">{i}</a>
          </li>
        );
    }

和jsx如下:

<ul className="pagination">
    {rows}
</ul>

服务器返回 4 个页面,它们在屏幕上正确呈现;但是问题是每当我单击任何页面按钮时,activePageNumber 始终为 1,它根本没有改变。

4

1 回答 1

0

您正在构建整个 html 之外return,因此当您i尝试lirows您的ul

相反,您应该在return语句中添加所有这些逻辑。

看看这个沙盒

于 2021-07-06T12:07:42.750 回答