尝试在 React 中映射子对象时出现未定义错误

Posted 2023-02-22

【中文标题】尝试在 React 中映射子对象时出现未定义错误

【英文标题】：Undefined error when trying to map child objects in React

【发布时间】：2021-05-31 18:32:17

【问题描述】：

我正在尝试获取嵌套 JSON 对象的图像 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"

]

【问题讨论】：

你可以试试post.image[0].url ..由于图像是一个数组，我认为你需要尝试[0]来获取第一个元素..

@codemonkey，这与 Nextjs 有关，默认情况下会在预渲染页面上调用。参考：nextjs.org/docs/basic-features/…

【参考方案1】：

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 或者它是空的，这可能会出错，所以你应该通过只显示存在的东西来保护它。

【讨论】：

是的，出现了这个错误：Cannot read property '0' of undefined。即使我尝试过post.image[0].name !== undefined ? 'yes' : null 或post.image[0].rawUrl === undefined ? 'yes' : 'no'

已解决：post.image && post.image[0].rawUrl

【参考方案2】：

如果使用async\await，则无需调用then()方法。

As mdn says:

await 可以放在任何基于异步承诺的函数前面来暂停 您在该行的代码，直到承诺履行，然后返回 结果值。

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
        ,
    ;

【讨论】：

当我尝试得到错误提示数据未正确格式化为 JSON 时？

@BrucevanZyl 你能在方法getStaticProps() 中显示console.log(posts) 的结果吗？