微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

NextJs:不同路径的相同类组件,getServerSideProps 不重新渲染

如何解决NextJs:不同路径的相同类组件,getServerSideProps 不重新渲染

我有两个页面使用相同的一个组件 PostssearchModel 作为道具,当我使用 Next Link 更改路径时,除非刷新页面,否则组件永远不会重新呈现。我的代码

index.js

export default function Home({ posts,searchModel }) {

  const postsProps = {
    posts: posts.records,totalCount: posts.totalCount,searchModel
  }

  return <Posts {...postsProps} />

}

export async function getServerSideProps() {...}

category/[id]/[slug].js

export default function Category({ posts,searchModel,category,error}) {

  const postsProps = {
    posts: posts.records,title: category.title
  }

  return <Posts {...postsProps} />

}

export async function getServerSideProps() {
    
    try {

        const { params } = context

        const category = (await CategoryService.getById(params.id)).data

        const searchModel = {
            ...Utils.getinitialSearchModel(),categoryId: params.id
        }

        const posts = (await PostService.search(searchModel)).data

        return { props: { posts,category } }

    } catch (error) {

        return { props: { error } }

    }
}

和帖子:

class Posts extends Component {
    constructor(props) {
        super(props);

        console.log({ posts: props.posts }) // runs only once,on page load,will never hit on next link click
        this.state = {
            posts: props.posts,totalCount: props.totalCount,searchModel: props.searchModel,}
    }

    componentDidMount = () =>{
        console.log('component mounted') // this never hits on page change
    }

//  ....

我做错了什么吗?我可以绕过它而不必使用 componentDidUpdate() 吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。