记住刷新/重新加载后页面中显示的项目数

Question

正如标题所说，即使刷新页面后，我也想保留页面大小（显示的项目数）。尝试存储在本地存储中，将其显示在网址上，但页面不断重置为其原始值（显示 5 个项目） ) .

我插入了以下内容：

• 我尝试通过本地存储传递页面上显示的项目数（这是成功的，但刷新时不会反映在页面上）；
• 处理 url 创建的函数；
• API函数；
• 处理页面大小的函数；

  const [itemsPage, setItemsPage] = useState(() => {
    const storedPageSize = localStorage.getItem('pageSize');
    return storedPageSize ? parseInt(storedPageSize, 10) : 5;
  });

  useEffect(() => {
    localStorage.setItem('pageSize', itemsPage.toString());
  }, [itemsPage]);
  
  useEffect(() => {
    if (!isAuthenticated()) {
      addAlert("Need to login first!", "warning", cilWarning);
      navigate(from_login, { replace: true });
    }

    API_Generic(setLogout, addAlert).genericCall(
      "/campaigns" + "?page=" + "1" + "&page_size=" + itemsPage,
      API_Generic(setLogout, addAlert).requestOptions("GET", token, null),
      false,
      setCampaignsMenu,
      null,
      null,
      getHeaders
    );
  }, []);  
  
  const handleChangePageSize = (e) => {
    if (e.target.value) {
      setItemsPage(e.target.value);

      let aux = 0;
      if (page * parseInt(e.target.value) > totalCount) {
        aux = Math.ceil(totalCount / e.target.value);
        setPage(aux);
      } else {
        aux = page;
      }

      filterCallAPI(
        document.getElementById("searchbar").value,
        aux,
        e.target.value
      );
    }
  };  
  
  
  function filterCallAPI(searchbartext, page, pagesize) {
    API_Generic(setLogout, addAlert).genericCall(
      create_url(searchbartext, page, pagesize),
      API_Generic(setLogout, addAlert).requestOptions("GET", token, null),
      false,
      setCampaignsMenu,
      null,
      null,
      getHeaders
    );
  }
  
  function create_url(searchbartext, page, pagesize) {
    let url =
      "/campaigns" +
      "?page=" +
      page +
      "&page_size=" +
      pagesize +
      "&searchbar=" +
      searchbartext;

    return url;
  }

Answer 1

因为每次更改

localStorage

时您都想更新

itemsPage

。我更喜欢为

custom Setter

创建一个

itemsPage

来处理设置

localstorage

中的值。 并且您还需要在

useEffect

的依赖项中添加 itemsPage，以便每次更新 itemsPage 时都会触发调用。

  const [itemsPage, setItemsPage] = useState(() => {
    const storedPageSize = localStorage.getItem('pageSize');
    return storedPageSize ? parseInt(storedPageSize, 10) : 5;
  });

  const handleItemsPage = (newItemsPage) => {
    localStorage.setItem('pageSize', newItemsPage.toString());
    setItemsPage(newItemsPage);
  };
  
  useEffect(() => {
    if (!isAuthenticated()) {
      addAlert("Need to login first!", "warning", cilWarning);
      navigate(from_login, { replace: true });
    }

    API_Generic(setLogout, addAlert).genericCall(
      "/campaigns" + "?page=" + "1" + "&page_size=" + itemsPage,
      API_Generic(setLogout, addAlert).requestOptions("GET", token, null),
      false,
      setCampaignsMenu,
      null,
      null,
      getHeaders
    );
  }, [itemsPage]);  
  
  const handleChangePageSize = (e) => {
    if (e.target.value) {
      handleItemsPage(e.target.value);

      let aux = 0;
      if (page * parseInt(e.target.value) > totalCount) {
        aux = Math.ceil(totalCount / e.target.value);
        setPage(aux);
      } else {
        aux = page;
      }

      filterCallAPI(
        document.getElementById("searchbar").value,
        aux,
        e.target.value
      );
    }
  };  
  
  
  function filterCallAPI(searchbartext, page, pagesize) {
    API_Generic(setLogout, addAlert).genericCall(
      create_url(searchbartext, page, pagesize),
      API_Generic(setLogout, addAlert).requestOptions("GET", token, null),
      false,
      setCampaignsMenu,
      null,
      null,
      getHeaders
    );
  }
  
  function create_url(searchbartext, page, pagesize) {
    let url =
      "/campaigns" +
      "?page=" +
      page +
      "&page_size=" +
      pagesize +
      "&searchbar=" +
      searchbartext;

    return url;
  }