React 组件状态在按钮单击后设置后不会改变

Question

我仍在学习 React Hooks，请多多包涵；我正在编写一个自定义服务器端分页组件；然后循环遍历页面以像这样呈现它们：

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，它根本没有改变。

Answer 1

您正在 return 之外构建整个 html，因此 i 将始终默认为 rows 中每个 li 元素的最后一个数字当您尝试在 ul

中渲染它时列出

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

看看this sandbox

React 组件状态在按钮单击后设置后不会改变

React component state do not change after setting it on button click

pagination

custompaging

reactjs

react-hooks