인프런 커뮤니티 질문&답변
작성한 질문수
다른 부분에서 오류가 안나는데 {post.map 부분이 계속 오류가 납니다.
작성
·
210
1
-das
import React, { FunctionComponent } from 'react'
import styled from '@emotion/styled'
import PostItem from 'components/Main/PostItem'
import { PostListItemType } from 'types/PostItem.types'
export type PostType = {
node: {
id: string
frontmatter: {
title: string
summary: string
date: string
categories: string[]
thumbnail: {
publicURL: string
}
}
}
}
type PostListProps = {
posts: PostListItemType[]
}
const PostListWrapper = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
width: 768px;
margin: 0 auto;
padding: 50px 0 100px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
width: 100%;
padding: 50px 20px;
}
`
const PostList: FunctionComponent<PostListProps> = function ({ posts }) {
return (
<PostListWrapper>
{posts.map(
({
node: { id, frontmatter },
}: PostType) => (
<PostItem
{...frontmatter}
link="https://www.google.co.kr/"
key={id}
/>
),
)}
</PostListWrapper>
)
}
export default PostList
색칠한 부분이
Argument of type '({ node: { id, frontmatter }, }: PostType) => JSX.Element' is not assignable to parameter of type '(value: PostListItemType, index: number, array: PostListItemType[]) => Element'.
Types of parameters '__0' and 'value' are incompatible.
Type 'PostListItemType' is not assignable to type 'PostType'.
The types of 'node.frontmatter.thumbnail' are incompatible between these types.
Property 'publicURL' is missing in type '{ childImageSharp: { gatsbyImageData: IGatsbyImageData; }; }' but required in type '{ publicURL: string; }'.
이런 에러를 띄웁니다... 계속 처음부터 따라해봤는데 요부분만 해결이 안되요...
안녕하세요, hwangcc1018님!
너무 늦게 질문을 확인해서 죄송하다는 말씀 먼저 드리고 싶습니다 ㅠㅠ
혹시 문제점을 해결하셨을까요?
일단 에러 메시지를 확인해봤을 때에는 타입이 맞지 않아서 생기는 문제로 보입니다.
바로 이전 챕터인 gatsby-plugin-image 라이브러리로 최적화된 썸네일 사진 띄워주기 부분에서
PostListItemType에 대한 타입 정의를 변경했는데, 이 과정에서 publicURL 이라는 프로퍼티가 삭제되었습니다!
해당 챕터를 다시 복습하고 오시는 것을 추천드립니다 :)