嘗試在 React 中使用 map 子對象時出現未定義錯誤

Question

我正在嘗試獲取嵌套 JSON object 的圖像 url。

試過{post.image.url}但我收到一條錯誤消息，提示 url undefined

我感謝可以提供的任何幫助或指導。 Javascript / React 的新手，但經過一個小時的谷歌搜索和搜索后無法找到解決方案。 必須缺少一些簡單的東西：-P

這是我的代碼...

export const getAllPosts = async () => {
    return await fetch(
        `https://notion-api.splitbee.io/v1/table/${NOTION_BLOG_ID}`
    ).then((res) => res.json());
}
export async function getStaticProps() {
    const posts = await getAllPosts()
    return {
        props: {
            posts
        },
    };
}
function Blog({ posts }) {
    return (
        <div>
            {posts.map((post) => (
                <Link href="/blog/[slug]" as={`/blog/${post.slug}`}>
                    <div>
                        <div className='text-6xl'>{post.title}</div>
                        <img className='w-24' src={post.imgUrl}></img>

                        
                        {/*{post.image.rawUrl}*/}

                    </div>
                </Link>
            ))}
        </div>
    );
}
export default Blog

這是 JSON...

[
{
"id": "90ee0723-aeb5-4d64-a970-332aa8f819f6",
"slug": "first-post",
"date": "2020-04-21",
"Related to Notion API Worker (Column)": [
"0976bfa6-392a-40b0-8415-94a006dba8d9"
],
"imgUrl": "https://www.notion.so/image/https:%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F689883de-2434-4be3-8179-a8ba62a7bc1e%2Fsnowmountain.jpg?table=block&id=90ee0723-aeb5-4d64-a970-332aa8f819f6&cache=v2",
"image": [
{
"name": "snowmountain.jpg",
"url": "https://www.notion.so/image/https:%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F689883de-2434-4be3-8179-a8ba62a7bc1e%2Fsnowmountain.jpg?table=block&id=90ee0723-aeb5-4d64-a970-332aa8f819f6&cache=v2",
"rawUrl": "https://s3-us-west-2.amazonaws.com/secure.notion-static.com/689883de-2434-4be3-8179-a8ba62a7bc1e/snowmountain.jpg"
}
],
"title": "My first blogpost bruce"
}
]

Answer 1

如果您使用async\await ，則無需調用then()方法。

正如 mdn 所說：

await 可以放在任何基於異步承諾的 function 前面，以暫停該行上的代碼，直到 promise 完成，然后返回結果值。

export const getAllPosts = async () => {
    return await fetch(
        `https://notion-api.splitbee.io/v1/table/${NOTION_BLOG_ID}`
    );
}

export async function getStaticProps() {
    const posts = await getAllPosts()
    return {
        props: {
            posts
        },
    };
}

Answer 2

post的image屬性是一個數組，由第 1 行末尾的括號表示：

1. "image": [
2.   {
3.     "name": "snowmountain.jpg",
4.     "url": "https://www.notion.so/image/https:%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F689883de-2434-4be3-8179-a8ba62a7bc1e%2Fsnowmountain.jpg?table=block&id=90ee0723-aeb5-4d64-a970-332aa8f819f6&cache=v2",
5.     "rawUrl": "https://s3-us-west-2.amazonaws.com/secure.notion-static.com/689883de-2434-4be3-8179-a8ba62a7bc1e/snowmountain.jpg"
6.   }
7. ],

如果您知道總會有一個圖像，您可以通過引用第一個數組項直接訪問它。

function Blog({ posts }) {
    return (
        <div>
            {posts.map((post) => (
                <Link href="/blog/[slug]" as={`/blog/${post.slug}`}>
                    <div>
                        <div className='text-6xl'>{post.title}</div>
                        <img className='w-24' src={post.imgUrl}></img>

                        
                        {post.image && post.image[0].rawUrl}

                    </div>
                </Link>
            ))}
        </div>
    );
}

請注意，如果數組undefined / null或它為空，這可能會出錯，因此您可能應該通過僅顯示存在的內容來保護它。