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

Question

我还在学习反应钩子，所以请耐心等待；我正在编写一个自定义服务器端分页组件；然后 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，它根本没有改变。

Answer 1

您正在构建整个 html 之外return，因此当您i尝试li在rows您的ul

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

看看这个沙盒