Question

我正在使用自定义分页组件对数组中的数据进行分页。当用户转到某个页面并刷新时，它会将用户带回第一页。我想我可以使用 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"
      />
    </>
  );
};

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

Answer 1

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

Answer 2

你可以这样做..

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"
      />
    </>
  );
};

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

2 个答案: