Next.js中无法获取URL参数ID并结合Axios请求的问题

问题原因 #

• Next.js客户端路由中，router.query的参数加载是异步过程，组件初始渲染时router.query.id会是undefined
• 你的useEffect依赖数组为空，仅在组件挂载时执行一次请求，此时id还未被正确获取，导致请求URL无效

解决方案 #

1. 将id添加到useEffect的依赖数组中，确保id更新后重新触发请求
2. 在发起请求前判断id是否存在，避免无效请求

修改后的代码 #

import Head from 'next/head'
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'


export default function QuejaID() {
    const router = useRouter()
    const id = router.query.id
    const [queja, setQueja] = useState();

    useEffect(() => {
        // 先判断id是否存在，再发起请求
        if (!id) return
        
        async function request() {
            try {
                const response = await axios.get(`http://localhost:3000/quejas/${id}`)
                setQueja(response.data)
                console.log(response)
            } catch (err) {
                console.log(err)
            }
        }
        request()
    }, [id]); // 将id加入依赖数组

    return (
        <>
            <Head>
                <title>Quejas</title>
                <meta name="description" content="queja" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <main>
                {queja ? (
                    <div className="container d-flex justify-content-center">
                        <div className="card text-center w-75 m-5">
                            <div className="card-header">{queja._id}</div>
                            <div className="card-body">
                                <h5 className="card-title">{queja.queja}</h5>
                            </div>
                            <div className="card-footer text-muted">{queja.createdAt}</div>
                        </div>
                    </div>
                ) : id ? (
                    <div>Cargando queja...</div>
                ) : (
                    <div>No hay ninguna queja con ese ID</div>
                )}
            </main>
        </>
    )
}

内容的提问来源于stack exchange，提问作者Jose-xd