Building static HTML failed for path "/main/postItem/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
19 | categories,
20 | summary,
> 21 | thumbnail: { publicURL },
| ^
22 | link,
23 | }) => {
24 | return (
WebpackError: TypeError: Cannot read properties of undefined (reading 'publicURL')
- postItem.tsx:21
gatsby-starter-default/src/pages/main/postItem.tsx:21:16
- inheritsLoose.js:5
[gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:5:1
- emotion-is-prop-valid.esm.js:15
[gatsby-starter-default]/[@emotion]/is-prop-valid/dist/emotion-is-prop-valid.esm.js:15:1
- inheritsLoose.js:7
[gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:7:1
- static-entry.js:294
gatsby-starter-default/.cache/static-entry.js:294:22
- history.js:49
[gatsby-starter-default]/[@gatsbyjs]/reach-router/es/lib/history.js:49:6
你好。
我解決了過濾器和地圖等地方未定義的問題。順便說一句，我想知道在引數方面如何解決 undefined 。
我們已經驗證了 publicURL 存在于 http://localhost:8000/__graphql。
import React, { FunctionComponent } from 'react'
import styled from '@emotion/styled'
import { Link } from 'gatsby'
type PostItemProps = {
title: string
date: string
categories: string[]
summary: string
thumbnail: {
publicURL?: string
}
link: string
}
const PostItem: FunctionComponent<PostItemProps> = ({
title,
date,
categories,
summary,
thumbnail: { publicURL },
link,
}) => {
return (
<PostItemWrapper to={link}>
<Thumbnail>
{publicURL ? <img src={publicURL} alt="???" /> : <></>}
</Thumbnail>
<InfoWrapper>
<Title>{title}</Title>
<Date>{date}</Date>
{categories?.map(category => (
<CategoryItem key={category}>{category}</CategoryItem>
))}
<Summary>{summary}</Summary>
</InfoWrapper>
</PostItemWrapper>
)
}
我留下github地址以防萬一。 https://github.com/urther/example
謝謝你。
uj5u.com熱心網友回復：
如果縮略圖未定義，publicURL 將在您嘗試訪問未定義引數中的值時引發錯誤。不要在引數本身中解構縮略圖，只傳遞縮略圖并在函式內部執行此操作。
const { publicURL } = {...thumbnail}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457636.html
上一篇：為什么值沒有正確更新？