질문입니다

React로 NodeBird SNS 만들기

5-16. 게시글 작성과 데이터 관계 연결하기

작성

135

안녕하세요 현재 5-16 수강 중입니다. 이번에도 뭔가 사소한 오류같은데... 죄송스럽지만 이렇게 도움을 요청드립니다!

현재 로그인 후 포스트를 추가하면 리덕스 상에 ADD_POST_SUCCESS 출력 , db 상에 추가까진 완료하는데 폼에 렌더링을 못하는건지 아래와 같은 에러가 뜹니다

TypeError: post is undefined
PostCard
./components/PostCard.js:45

42 | <div>
43 |   <Card
44 |     style={{ marginTop: "10px" }}
> 45 |     key={+post.createdAt}
     | ^ 46 |     cover={post.img && <img alt="example" src={post.img} />}
47 |     actions={[
48 |       <Icon type="retweet" key="retweet" />,

이전 단원에서 새 포스트를 추가할 때 문제가 없던 부분인데 갑자기 여기서 문제가 생기네요..

하루종일 제로초님의 깃헙 코드와 비교를 해보았으나... 뭐가 문제인지 감이 안오네요 ㅠㅠ 또 이렇게 번거롭게 해드려 죄송하지만 .. 제 코드를 좀 봐주실 수 있을까요?

https://github.com/ljg0230/nodebird_ljg

react javascript

답변 5

제로초(조현영)

지식공유자

이게 mainPosts에 undefined가 들어가서 생기는 문제이기 때문에 어디서 undefined가 들어가는지 첮어보셔야겠습니다.

leejg

질문자

답변 감사드립니다~
reducer ADD_POST_SUCCESS에서 console.log(action.data)라는 말씀은 reduce 함수 내에 switch 문 안에서 로그를 찍어보라는 말씀인가요?

우선 sagas 에서

function* addPost(action) {
  try {
    const result = yield call(addPostAPI, action.data)
    yield put({
      type: ADD_POST_SUCCESS,
      data: result.data,
    });
    console.log(action.data);
  } catch (e) {
    yield put({
      type: ADD_POST_FAILURE,
      error: e,
    });
  }
}

이렇게 로그를 찍으면
object { content: "#test" } 이런 식으로 입력값이 로그에 잘 나오긴 합니다

제로초(조현영)

지식공유자

논외로, sagas comment.js에서 addComment 오타있습니다.

제로초(조현영)

지식공유자

reducer ADD_POST_SUCCESS에서 console.log(action.data) 해보시겠어요?

leejg

질문자

여기저기 로그를 찍어보고 있지만 아직 못찾았네요ㅠ...

포스트 추가 (입력값 123)부터의 console.log를 순차적으로 확인해보면

in post sagas: {"content":"123"} post.js:60

in index.js(pages): [null,{"id":1,"User":{"id":1,"nickname":"이정걸"},"content":"첫 번째 게시글","img":"","Comments":[]}] index.js:19

in PostCard.js / post: undefined 2 PostCard.js:42

이렇게 undefined가 되는걸 확인은 했으나 어디서 문제가 된 건지... 근데 이게 backend 에서 문제가 될 수 있는건가요???

인프런 커뮤니티 질문&답변

질문입니다