I'm a beginner with Next.js and I'm currently using getServerSideProps to retrieve an array of objects. This array is fetched from a backend API by utilizing the page parameters as explained in the dynamic routes documentation: https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props
Once I have the array, I pass it on to another component for mapping.
However, upon running the application, I encounter an error message that reads:
TypeError: Cannot read properties of undefined (reading 'page')I'm puzzled as to why this issue is occurring since the backend server appears to be sending the objects correctly.
Below is the code snippet for the Page component:
export interface LikedListRes {
LikedArtwork: SearchResult[]
page: number
}
const Account: NextPage<{data: LikedListRes}> = ({data}: {data: LikedListRes}) => {
return (
<Grid container spacing={2}>
<Grid xs={4} sm={4} md={4} lg={4}></Grid>
<Grid xs={8} sm={8} md={8} lg={8}>
<Box sx={{margin: 'auto'}}>
<LikedArtworks page={data.page} likedArtwork={data.LikedArtwork} />
</Box>
</Grid>
</Grid>
)
}
Additionally, here is the function which includes the route using the userID parameter:
const getServerSideProps: GetServerSideProps = async ({params}) => {
const getLikedArtwork = async (userID: string, page: number) => {
const res = await fetch(`http://${api}/likedArtwork?page=${page.toString()}&userID=${userID}`).then(async res => {
const response: LikedListRes = await res.json()
return response
})
return res
}
const res = await getLikedArtwork(params?.id as string, 0)
return {
props: {data: res}
}
}
If anyone has any suggestions or insights on how to resolve this issue, your help would be greatly appreciated!