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 (将#修改为@)