如何解决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,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 举报,一经查实,本站将立刻删除。