我不知道這是不是一個愚蠢的問題，但我正在使用django api，并試圖在搜索頁面上實作分頁，我對Next.js非常陌生，我在網上搜索了一個答案，但什么都沒有，這是代碼，從錯誤中，它讓我相信我不能同時傳遞 "context "和 "query : {page = 1}"，或者類似的東西，有什么解決方法嗎？
。import Video from ' 。 ././components/video'
const VideosSearch = ({results: videos, page}) => {
return(
<>
<div>
{videos.length > 0 && videos.map ((video) =>
<Video key={video.id} {...video}。/>)}
</div>）。
<button onClick={（） => router. push(`/videos?page=${page 1}`)}> next </button>
</>
)
}
export async function getServerSideProps（context, {query: {page = 1}}） {
const start = page ==1 ? 0 : ( page - 1) * 3 ?
const res = await fetch（`http://localhost:8000/api/videos/? offset=${start}&order=-list_date&search=${context.params.query}`)
const json = await res.json()
const videos = json
return{
props: {
results: videos.results,
page: page
}
}
}
export default VideosSearch 它給了我
TypeError: 不能讀取未定義的屬性'query'oh and btw this is from /pages/search/[query].js
uj5u.com熱心網友回復：
實際上，背景關系引數有你需要的一切
export async function getServerSideProps(context) {. ..}要從URL中獲取引數，請這樣做
const { page, query}= context.req.params>uj5u.com熱心網友回復：
你能夠在context物件上訪問params和查詢。getServerSideProps將只接收帶有各種鍵的單一背景關系引數。
假設你有
/pages/search/[query].jsx，它支持/search/sith或/search/sith? page=2你需要按以下方式稍作修改：
export async function getServerSideProps(context) { const page = context.query.hasOwnProperty（'page'） ? parseInt(context.query.page, 10) : 1。 const start = (page - 1) * 3; console.info(context.params.query, page, start) 。 const res = await fetch（`http://localhost:8000/api/videos/? offset=${start}&order=-list_date&search=${context.params.query}`) const json = await res.json() const videos = json; return{ props: { results: videos.results, page: page } }轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/318882.html
標籤：
上一篇：使用flutter2.5運行測驗出錯："加載"_test.dart"失敗。Shell子行程干凈地結束了。main()是否呼叫exit()？"