reactjs - 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() {...}
类别/[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() 吗?
解决方案
推荐阅读
- qlikview - 在 QLIK 中,如何根据表 A 中的条件将数据从表 B 添加到表 A
- excel - 如何通过仅选择表正下方行中的任何单元格来触发宏(ListObject)
- php - 如何从两个不同的表中获取两个不同列的计数
- google-colaboratory - 在 google colab 错误中无法从“statsmodels.compat.pandas”导入名称“Appender”?
- javascript - 在 React 和 Vanilla Javascript 的数字输入中键入 `e` 时不会调用 onChange
- docker - 只为 NodeJS 安装 devDependencies
- arrays - Angular 2:对象内部数组的变化检测
- react-native - 为什么应用程序在 iPad React Native 中显示黑色空间
- angular - 是否有任何声明性方法可以在不将 formgroup 传递给 addRow 函数的情况下在 kendo 网格中创建添加行模板
- sql - 如何重写 SQL 查询以提高效率?