대댓글 작성시 오류 발생
541
이승주
작성한 질문수 4
0
안녕하세요~ 강의 잘 듣고 있습니다. 대댓글 작성시 아래와 같은 오류가 발생하는데 ㅠ 원인을 잘 모르겠습니다. postcard 컴포넌트에서 발생하는거 같은데 다시 영상보고 코드를 봐도 수정이 안되서 다음 진도를 못 나가고 있습니다. 확인 부탁드리겠습니다. 
답변 4
0
<sagas_post.js>
import axios from "axios";
import { delay, put, takeLatest, all, fork } from "redux-saga/effects";
import {
ADD_POST_REQUEST,
ADD_POST_SUCCESS,
ADD_POST_FAILURE,
ADD_COMMENT_REQUEST,
ADD_COMMENT_SUCCESS,
ADD_COMMENT_FAILURE,
} from "../reducers/post";
function addPostAPI(data) {
return axios.post("/api/post", data);
}
//put은 디스패치
function* addPost(action) {
try {
//call은 데이터 나올떄까지 대기
yield delay(1000);
// const result = yield call(addPostAPI, action.data);
yield put({
type: ADD_POST_SUCCESS,
data: action.data,
});
} catch (err) {
yield put({
type: ADD_POST_FAILURE,
data: err.response.data,
});
}
}
function addCommentAPI(data) {
return axios.post("/api/post/${data.postId}/comment", data);
}
//put은 디스패치
function* addComment(action) {
try {
//call은 데이터 나올떄까지 대기
yield delay(1000);
// const result = yield call(addPostAPI, action.data);
console.log("addComment사가");
yield put({
type: ADD_COMMENT_SUCCESS,
data: action.data,
});
} catch (err) {
yield put({
type: ADD_COMMENT_FAILURE,
data: err.response.data,
});
}
}
function* watchAddPost() {
yield takeLatest(ADD_POST_REQUEST, addPost);
}
function* watchAddComment() {
yield takeLatest(ADD_COMMENT_REQUEST, addComment);
}
export default function* postSaga() {
yield all([fork(watchAddPost), fork(watchAddComment)]);
}
0
<reducer_post.js>
import shortId from "shortid";
export const initialState = {
mainPosts: [
{
id: 1,
User: {
id: 1,
nickname: "제로초",
},
content: "첫번째 게시글#해시테그#익스프레스",
Images: [
{
src: "https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?update=20180726",
},
{
src: "https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg",
},
{
src: "https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg",
},
],
Comments: [
{
User: {
nickname: "nero",
},
content: "우와 개정판이당",
},
{
User: {
nickname: "hero",
},
content: "얼른사고 싶어요~",
},
],
imagePaths: [],
postAdded: false,
addPostLoading: false,
addPostDone: false,
addPostError: null,
addCommentLoading: false,
addCommentDone: false,
addCommentError: null,
},
],
};
//액션 이름을 상수로 뺌
export const ADD_POST_REQUEST = "ADD_POST_REQUEST";
export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS";
export const ADD_POST_FAILURE = "ADD_POST_FAILURE";
export const ADD_COMMENT_REQUEST = "ADD_COMMENT_REQUEST";
export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS";
export const ADD_COMMENT_FAILURE = "ADD_COMMENT_FAILURE";
const ADD_POST = "ADD_POST";
export const addPost = (data) => ({
type: ADD_POST_REQUEST,
data,
});
export const addComment = (data) => ({
type: ADD_COMMENT_REQUEST,
data,
});
const dummyPost = (data) => ({
id: shortId.generate(),
content: data,
User: {
id: 1,
nickname: "제로초",
},
Images: [],
Comments: [],
});
const dummyComment = (data) => ({
id: shortId.generate(),
content: data,
User: {
id: 1,
nickname: "제로초",
},
});
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_POST_REQUEST:
return {
...state,
addPostLoading: true,
addPostDone: false,
addPostError: null,
};
case ADD_POST_SUCCESS:
return {
...state,
// dummyPost앞에 작성해야 게시글 위에 올라감
mainPosts: [dummyPost(action.data), ...state.mainPosts],
addPostLoading: false,
addPostDone: true,
};
case ADD_POST_FAILURE:
return {
...state,
addPostLoading: false,
addPostError: action.error,
};
case ADD_COMMENT_REQUEST:
const postIndex = state.mainPosts.findIndex(
(v) => v.id === action.data.postId
);
const post = { ...state.mainPosts[postIndex] };
post.Comments = [dummyComment(action.data.content), ...post.Comments];
const mainPosts = [...state.mainPosts];
mainPosts[postIndex] = post;
return {
...state,
mainPosts,
addCommentLoading: false,
addCommentDone: true,
};
case ADD_COMMENT_SUCCESS:
return {
...state,
// dummyPost앞에 작성해야 게시글 위에 올라감
mainPosts: [dummyPost, ...state.mainPosts],
addCommentLoading: false,
addCommentDone: true,
};
case ADD_COMMENT_FAILURE:
return {
...state,
addCommentLoading: false,
addCommentError: action.error,
};
default:
return state;
}
};
export default reducer;
0
<components_PostCard.js>
import React, { useState, useCallback } from "react";
import PropTypes from "prop-types";
import { useSelector, useDispatch } from "react-redux";
import { Card, Popover, Button, Avatar, List, Comment } from "antd";
import {
RetweetOutlined,
HeartOutlined,
MessageOutlined,
EllipsisOutlined,
HeartTwoTone,
ConsoleSqlOutlined,
} from "@ant-design/icons";
import Link from "next/link";
import moment from "moment";
import CommentForm from "./CommentForm";
import PostImages from "./PostImages";
import PostCardContent from "./PostCardContent";
const PostCard = ({ post }) => {
console.log("포스트카드");
console.log(post);
const [Liked, setLiked] = useState(false);
const [commentFormOpened, setCommentFormOpened] = useState(false);
const onToggleLike = useCallback(() => {
// prev는 자동으로 이전 데이터가 들어가 있음. true는 false로 false는 true로
setLiked((prev) => !prev);
}, []);
const onToggleComment = useCallback(() => {
// true는 false로 false는 true로
setCommentFormOpened((prev) => !prev);
}, []);
// const { id } = useSelector((state) => state.user.me && state.user.me.id);
// 같은 문장인데 줄어 든거임.
const id = useSelector((state) => state.user.me?.id);
return (
<div style={{ marginTop: 20 }}>
<Card
cover={post.Images[0] && <PostImages images={post.Images} />}
// 배열 안에 jsx를 넣어줄거면 key를 넣어 줘야 한다.
actions={[
<RetweetOutlined key="retweet" />,
Liked ? (
<HeartTwoTone
twoToneColor="#eb2f96"
key="heart"
onClick={onToggleLike}
/>
) : (
<HeartOutlined key="heart" onClick={onToggleLike} />
),
<MessageOutlined key="comment" onClick={onToggleComment} />,
<Popover
key="more"
content={
<Button.Group>
{/* 로그린 했고 작성자 아이디랑 내아이디랑 같으면 수정 가능 */}
{id && post.User.id === id ? (
<>
<Button>수정</Button>
<Button type="danger">삭제</Button>
</>
) : (
<Button>신고</Button>
)}
</Button.Group>
}
>
<EllipsisOutlined />
</Popover>,
]}
>
<Card.Meta
// 유저 닉네임의 첫번째 글자
avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
title={post.User.nickname}
description={<PostCardContent postData={post.content} />}
/>
</Card>
{commentFormOpened && (
<div>
<CommentForm post={post} />
<List
header={`${post.Comments.length}개의 댓글`}
itemLayout="horizontal"
dataSource={post.Comments}
// post.comments의 세부 항목이 item으로 들어감
renderItem={(item) => (
<li>
<Comment
author={item.User.nickname}
avatar={<Avatar>{item.User.nickname[0]}</Avatar>}
content={item.content}
/>
</li>
)}
/>
</div>
)}
{/* <CommentForm />
<Comments /> */}
</div>
);
};
PostCard.propTypes = {
// PropTypes.object이렇게 할 수 있는데 더 구체적으로 적어 줄수 있다.
post: PropTypes.shape({
id: PropTypes.number,
User: PropTypes.object,
content: PropTypes.string,
createdAt: PropTypes.object,
Comments: PropTypes.arrayOf(PropTypes.object),
Images: PropTypes.arrayOf(PropTypes.string),
}).isRequired,
};
export default PostCard;
넥스트 버젼 질문
0
90
2
로그인시 401 Unauthorized 오류가 뜹니다
0
104
1
무한 스크롤 중 스크롤 튐 현상
0
192
1
특정 페이지 접근을 막고 싶을 때
0
116
2
createGlobalStyle의 위치와 영향범위
0
102
2
인라인 스타일 리렌더링 관련
0
98
2
vsc 에서 npm init 설치시 오류
0
157
2
nextjs 15버전 사용 가능할까요?
0
166
1
화면 새로고침 문의
0
129
1
RTK에서 draft, state 차이가 있나요?
0
160
2
Next 14 사용해도 될까요?
0
455
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
359
1
url 오류 질문있습니다
0
217
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
391
1
sudo certbot --nginx 에러
0
1293
2
Minified React error 콘솔에러 (hydrate)
0
478
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
255
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
338
1
npm run build 에러
0
525
1
front 서버 npm run build 중에 발생한 에러들
0
399
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
350
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
290
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
249
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
206
1