如何在具有更新状态的自定义服务器端分页的反应钩子中执行一次useEffect

如何解决如何在具有更新状态的自定义服务器端分页的反应钩子中执行一次useEffect

我仍在学习 React 钩子，所以请耐心等待；我正在编写一个自定义的服务器端分页组件；首先，我像这样从服务器检索页面总数：

  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); 用于更新父组件中表的数据。