inflearn logo
강의

講義

知識共有

初めて出会うReact

미니 프로제트에서 map의 요소를 왜 찾지 못하는지 모르겠습니다

462

rnrmf07210431

投稿した質問数 3

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 미니 블로그 실습을 진행하던 중 위와 같은 오류를 발견하였습니다.

commentList 파일의 map함수를 보았는데, 분명 배열이여서 map함수가 실행이 되어야 하는데 찾이 못하더라구요

 

import React from "react";
import styled from "styled-components";
import CommentListItem from "./CommentListItem";

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-item: flex-start;
    justify-content: center;

    & > * {
        :not(:last-child){
            margin-bottom: 16px;
        }
    }
`;

function CommentList(props){
    const { comments } = props;

    return (
        <Wrapper>
            {comments.map((comment, index) => {
                return <CommentListItem key={comment.id} comment= {comment}/>
            })}
        </Wrapper>
    )
}

export default CommentList;

혹시 힌트를 알 수 있을까요?

HTML/CSS javascript react

回答 2

0

rnrmf07210431

import React from "react";
import styled from "styled-components";
import CommentListItem from "./CommentListItem";

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-item: flex-start;
    justify-content: center;

    & > * {
        :not(:last-child){
            margin-bottom: 16px;
        }
    }
`;


function CommentList(props){
    const { comments } = props;

    return (
        <Wrapper>
            {comments && comments.map((comment, index) => {
                return <CommentListItem key={comment.id} comment= {comment}/>
            })}
        </Wrapper>
    );
}

export default CommentList;

위와 같이 수정하여 고쳤습니다.

data가 불러들는 것보다 브라우저에서 파일을 읽는 것이 빠라서 발생한 오류라고 해서 위와 같은 해결 방법을 사용했습니다.

질문에 답변해주셔서 감사합니다:)

0

soaple

해결되셨다니 다행입니다!

0

soaple

안녕하세요, 소플입니다.

아무래도 commentsprops로 제대로 전달이 안된 것 같습니다.

실제로 CommentList 컴포넌트를 사용하는 쪽 코드를 보여주실 수 있을까요?

만약 해당 부분에 오타가 있다면 수정한 이후에 정상적으로 작동하는지 먼저 확인해보시기 바랍니다!

 

감사합니다.

강의가 삭제되었다고 합니다

0

106

1

이거 왜 존재하지 않는다고 뜨는건가요

0

133

1

존재하지 않는 수업이라고 떠요

0

182

1

안드로이드 에뮬레이터 오류

0

100

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

125

1

prevIsConfiromed 질문

1

141

2

chapter14 잘이해가 되지않습니다..

1

135

2

2025년 3월 리액트버전

1

201

2

npm 설치 오류

1

174

1

chapter_07 콘솔로그 질문드려요~!

1

127

2

안녕하세요 미니블로그 실습 질문드립니다.

1

178

3

에러가 떠요

1

218

3

Chapter6 질문 드립니다

1

209

2

실습 코드 있을까요?

1

205

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

233

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

308

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

140

1

버튼이 안 뜹니다

0

303

2

npx create-react-app my-app

1

470

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

375

3

Chapter_05 터미널, 리액트 에러

0

193

2

npx create-react-app my-app 명령어 반응없음

1

432

3

import 코드 에러

1

214

1

백틱

1

121

1