使用 Axios 向服務器發出 http 請求時出現問題

Question

我正在向 jasonplaceholder 服務器發出 get 請求以獲取數據，但是當我發出請求一段時間后，它顯示未定義，然后所有數據都來了，如何停止此未定義並停止代碼處理，直到從服務器

import React,{useState,useEffect} from 'react'
    import {useRouter} from 'next/router'
    import axios from 'axios'
    
    export default function Portfolio(){
        const router = useRouter();
    
        const [post,setPost] = useState({})
        console.log("323")
        console.log(router.query.id)
        useEffect(() => {
            axios.get(`https://jsonplaceholder.typicode.com/posts/${router.query.id}`)
            .then(res => {
                setPost(res.data)
            })
            .catch(err => {
                console.log(err)
            })
        },[router.query.id])
    
        return (
            <React.Fragment>
                <h1>{`userId : ${post.userId}`}</h1>
                <h1>{`id : ${post.id}`}</h1>
                <h1>{`title : ${post.title}`}</h1>
            </React.Fragment>
        )
    }

Answer 1

const response = await axios('endpoint');

setPost(response);

Answer 2

您可以在呈現代碼時添加條件。

檢查以下代碼：

<React.Fragment>
            <h1>{`userId : ${post && post.userId}`}</h1>
            <h1>{`id : ${post && post.id}`}</h1>
            <h1>{`title : ${post && post.title}`}</h1>
 </React.Fragment>