NextJs: компонент одного и того же класса для разных путей с getServerSideProps без повторного рендеринга

У меня есть две страницы с одним и тем же компонентом Posts это требует searchModelв качестве опоры, когда я изменяю путь с помощью 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,
    totalCount: posts.totalCount,
    searchModel,
    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, searchModel, 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 ()?

0 ответов

Другие вопросы по тегам