刷新后如何保持页面的当前状态？ - 反应答案

【问题标题】：How to keep the current state of a page after a refresh? - React刷新后如何保持页面的当前状态？ - 反应
【发布时间】：2021-10-01 20:48:19
【问题描述】：

我正在使用一个自定义分页组件来对数组中的数据进行分页。当用户转到某个页面并刷新时，它会将用户带回第一页。我想我可以使用Local Storage 来处理这个问题。见下文：

export interface PublicProps {
  ID: number;
}
const PAGE_SIZE: number = 10;

export const TestPage: React.FC<PublicProps> = ({ ID }) => {
  const [currentPage, setCurrentPage] = useState<number>(1);

  
  const suitesForProject = SOME DATA FROM AN ARRAY 

  const totalPages = suitesForProject.length
    ? Math.ceil(suitesForProject.length / PAGE_SIZE)
    : 0;

  const handleClickNext = () => {
    if (!suitesForProject.length) {
      return;
    }
    setCurrentPage((currentPage) => Math.min(currentPage + 1));
  };

  const handleClickPrev = () => {
    if (!suitesForProject.length || currentPage === 1) {
      return;
    }
    setCurrentPage((currentPage) => currentPage - 1);
  };

  return (
    <>
      {suitesForProject
        .slice((currentPage - 1) * PAGE_SIZE, PAGE_SIZE * currentPage)
        .map((suitesForProject) => (
          //doing stuff with the data here
        ))}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onClickPrevious={handleClickPrev}
        onClickNext={handleClickNext}
        previousPageButtonAriaLabel="To previous page"
        nextPageButtonAriaLabel="To next page"
      />
    </>
  );
};

有没有办法解决这个问题？

【问题讨论】：

是的，你可以在这里使用localStorage
@captain-yossarian，感谢您的回复。我无法在这里使用 localStorage 来解决问题
只需要声明localStorage的全局变量并在钩子中更新即可。使状态依赖于这个变量

标签： javascript arrays reactjs typescript local-storage

【解决方案1】：

你可以做这样的事情..

export interface PublicProps {
  ID: number;
}
const PAGE_SIZE: number = 10;

const PAGE_KEY = "MY_PAGINATION_KEY";

const getPageNumber = () => {
  if(localStorage && parseInt(localStorage.getItem(PAGE_KEY)) > 0) {
    return parseInt(localStorage.getItem(PAGE_KEY));
  }
  return 1;
}

export const TestPage: React.FC<PublicProps> = ({ ID }) => {
  const [currentPage, setCurrentPage] = useState<number>(getPageNumber());

  
  const suitesForProject = SOME DATA FROM AN ARRAY 

  const totalPages = suitesForProject.length
    ? Math.ceil(suitesForProject.length / PAGE_SIZE)
    : 0;

  const handleClickNext = () => {
    if (!suitesForProject.length) {
      return;
    }
    localStorage.setItem(PAGE_KEY, currentPage +1)
    setCurrentPage((currentPage) => Math.min(currentPage + 1));
  };

  const handleClickPrev = () => {
    if (!suitesForProject.length || currentPage === 1) {
      return;
    }
    localStorage.setItem(PAGE_KEY, currentPage - 1)
    setCurrentPage((currentPage) => currentPage - 1);
  };

  return (
    <>
      {suitesForProject
        .slice((currentPage - 1) * PAGE_SIZE, PAGE_SIZE * currentPage)
        .map((suitesForProject) => (
          //doing stuff with the data here
        ))}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onClickPrevious={handleClickPrev}
        onClickNext={handleClickNext}
        previousPageButtonAriaLabel="To previous page"
        nextPageButtonAriaLabel="To next page"
      />
    </>
  );
};

【讨论】：

感谢这按预期工作！不过我注意到了一些奇怪的事情。如果我退出窗口（比如关闭选项卡），本地存储仍然存在。例如，我切换到第5页并关闭窗口，然后重新打开它并停留在第5页。有没有办法在窗口关闭后重置页面？我试过 window.onunload = () => { localStorage.removeItem(PAGE_KEY); };但这似乎不起作用。
啊，我发现了一个漂亮的东西，叫做 sessionStorage！以上请忽略

【解决方案2】：

useState 具有延迟加载功能。它看起来像 useState(() => 1); 作为第一个参数的函数是调用一次的惰性函数。这个函数里面key读取localStorage，解析value，如果是number则返回，否则返回1。

【讨论】：