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, когда речь идет о параметрах.
Мы проверили, что общедоступный URL-адрес существует по адресу 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>
)
}
На всякий случай оставляю адрес гитхаба. https://github.com/urther/пример
Спасибо.
Если миниатюра не определена, publicURL выдаст ошибку, поскольку вы пытаетесь получить доступ к значению из неопределенного параметра. Не разрушайте миниатюру в самом параметре, только передайте миниатюру и делайте это внутри функции.
const { publicURL } = {...thumbnail}