Question

我用nextjs（带有服务器Express和API）和Reactjs构建了一个站点。

我想创建动态分页，因为静态生成的结果太多了，因此我添加了服务器端点 / publiations / page /：id ，我将getInitialsProps用于将ID保留在查询中

但是实际上，当我单击商店不为空的主页/出版物时，转到下一页（ publications / page / 1 ）时，页面将重新加载，商店为空。更改路线时如何保留商店？

这是我的 publications / page / [id] .js


const PublicationsPage = ({id}) => {
  return (
      <>
        <MainMenu/>
        <Search/>
        <div className="flex">
          <Sidebar fallback={<Loader/>}/>
          <Cards type={'publications'} idPage={id} />
        </div>
      </>
  )
}


PublicationsPage.getInitialProps = async function({ query: { id } }) {
  return {
    id: id
  };
};

export default withAuthSync(PublicationsPage);

我使用存储数据的卡组件：组件/Cards.js

const Cards = ({ idPage, cards, type }) => {

  console.log(cards)

    return (
        <div className="cards">
            <div className="content-filter-search">
                <div className="content-newsearchresult">
                    <div className="global-name">Result: {cards.cards.length} articles found</div>
                    <div className="content-button-blue">
                        <Link href="/explorer">
                            <a>
                                <div className="button-blue">New search</div>
                            </a>
                        </Link>
                    </div>
                </div>
                <div className="content-filter">
                    {filters[idPage].map((item) => {
                        return <InputFilter key={item.id} data={item} callback={keepItems} />;
                    })}
                </div>
            </div>
            <div className="wrapper-card">
                <div className="cards-container">
        {
          !cards.loading ? cards.cards.slice(idPage * 9, idPage * 9 + 9).map((card) => (
            <Card key={card.PMCID}  data={card} />
          )) : <Spinner color="black" size="100px" thickness={3} gap={5} speed="fast" />
        }
                </div>
            </div>
      <div className="text">
        <Link href={'/publications/page/1'}><a>Next page</a></Link>
      </div>
      {
        !cards.loading ? (
          <div className="center">
                    <Pagination type={type} page={parseInt(idPage)} totalElement={cards.cards.length} numberPerPage={9} />
                </div>
        ) : null
      }
        </div>
    );
};

const mapStateToProps = state => ({
  cards: state.cards,
})

export default connect(mapStateToProps)(Cards);

我对路由 / publications 和 / publications / page /：id 使用相同的代码，只是添加了getInitialProps来保留页面ID。我在Cards组件中使用connect redux

我在控制台中没有任何错误，只是我的商店因为页面重新加载而被重置。我不明白如何在我的商店进行分页，如果我在更改页面时商店是空的，那么我的数据在哪里

谢谢

NextJS-getInitialProps使重新加载和删除存储

0 个答案: