0

我还在学习反应钩子，所以请耐心等待；我正在编写一个自定义服务器端分页组件；首先，我从服务器检索总页数，如下所示：

  useEffect(() => {
    fetch(props.GetNumberOfPagesApiUrl)
      .then(handleErrors)
      .then((response) => {
        setNumberOfPages(response.responseMessage);
        console.log("Inside use effect : " + response.responseMessage);
      })
      .catch((error) => console.log(error));
  }, []);

然后在 for 循环中渲染一些 jsx

   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);
              props.SelectedPageChanged(i - 1, 5);
            }}
          >
            <a className="page-link">{i}</a>
          </li>
        );
      else
        rows.push(
          <li
            key={i}
            className="paginate_button page-item"
            onClick={() => {
              setActivePageNumber(i);
              console.log(activePageNumber);
              props.SelectedPageChanged(i - 1, 5);
            }}
          >
            <a className="page-link">{i}</a>
          </li>
        );
    }

和 jsx 一样

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

服务器返回 4 个页面，它们在屏幕上正确呈现；但是我在这里有两个问题：

  1. 每当我单击任何页面按钮时，activePageNumber 始终为 1，它根本没有改变。
  2. 每次点击寻呼机时都会调用使用效果函数。

这是我的组件状态函数：

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

只是为了澄清：props.SelectedPageChanged(i - 1, 5);用于更新父组件中表的数据。

4

0 回答 0