Cannot read property 'Likers' of null
223
거휘
작성한 질문수 9
0
고생이 많으십니다.
위 에러가 났는데 찾기가 너무 어려워서 올렸습니다.
찾는다고 찾았는데 두개의 이메일로 각각 게시글을 10개씩 썼는데도 막상 해당 post 주소로 들어가게 되면
이렇게 존재하지 않는 게시글(404)이라고 표시되고 있습니다.
그리고 콘솔창에 계속해서 Internal Server Error 500 에러 렌더링이 반복되고 있습니다.
코드는
routes/ post.js
const express = require('express')
const multer = require('multer')
const path = require('path')
const fs = require('fs')
const { Post, Image, Comment, User, Hashtag } = require('../models')
const { isLoggedIn } = require('./middlewares')
const router = express.Router()
try {
fs.accessSync('uploads')
} catch (error) {
console.log('uploads 폴더가 없으므로 생성합니다.')
fs.mkdirSync('uploads')
}
const upload = multer({
storage: multer.diskStorage({
destination(req, file, done) {
done(null, 'uploads')
},
filename(req, file, done) { // 제로초.png
const ext = path.extname(file.originalname) // 확장자 추출(.png)
const basename = path.basename(file.originalname, ext) // 제로초
done(null, basename + '_' + new Date().getTime() + ext) // 제로초15134314.png
}
}),
limits: { fileSize: 20 * 1024 * 1024 } // 20mb
})
router.post('/', isLoggedIn, upload.none(), async (req, res) => { // POST /post
try {
const hashtags = req.body.content.match(/#[^\s#]+/g)
const post = await Post.create({
content: req.body.content,
UserId: req.user.id
})
if (hashtags) {
const result = await Promise.all(hashtags.map((tag) => Hashtag.findOrCreate({ where: { name: tag.slice(1).toLowerCase() } }))) // [[노드, true], [리액트, true]]
await post.addHashtags(result.map((v) => v[0]))
}
if (req.body.image) {
if (Array.isArray(req.body.image)) { // 이미지를 여러개 올리면 image: [제로초.png, 부기초.png]
const images = await Promise.all(req.body.image.map((image) => Image.create({ src: image })))
await post.addImages(images)
} else { // 이미지를 하나만 올리면 image: 제로초.png
const image = await Image.create({ src: req.body.image })
await post.addImages(image)
}
}
const fullPost = await Post.findOne({
where: { id: post.id },
include: [{
model: Image
}, {
model: Comment,
include: [{
model: User, // 댓글 작성자
attributes: ['id', 'nickname']
}]
}, {
model: User, // 게시글 작성자
attributes: ['id', 'nickname']
},{
model: User, // 좋아요 누른사람
as: 'Likers',
attributes: ['id']
}]
})
res.status(201).json(fullPost)
} catch (error) {
console.error(error)
next(error)
}
})
router.post('/images', isLoggedIn, upload.array('image'), (req, res, next) => { // POST /post/images
console.log(req.files)
res.json(req.files.map((v) => v.filename))
})
router.post('/:postId/comment', isLoggedIn, async (req, res, next) => { // POST /post/1/comment
try {
const post = await Post.findOne({
where: { id: req.params.postId }
})
if (!post) {
return res.status(403).send('존재하지 않는 게시글입니다.')
}
const comment = await Comment.create({
content: req.body.content,
PostId: parseInt(req.params.postId, 10),
UserId: req.user.id
})
const fullComment = await Comment.findOne({
where: { id: comment.id },
include: [{
model: User,
attributes: ['id', 'nickname']
}]
})
res.status(201).json(fullComment)
} catch (error) {
console.error(error)
next(error)
}
})
router.get('/:postId', async (req, res, next) => { // GET /post/1
try {
const post = await Post.findOne({
where: { id: req.params.postId }
})
if (!post) {
return res.status(404).send('존재하지 않는 게시글입니다.')
}
const fullPost = await Post.findOne({
where: { id: post.id },
include: [{
model: Post,
as: 'Retweet',
include: [{
model: User,
attributes: ['id', 'nickname']
}]
}, {
model: User,
attributes: ['id', 'nickname']
}, {
model: Image
}, {
model: Comment,
include: [{
model: User,
attributes: ['id', 'nickname']
}]
}, {
model: User,
as: 'Likers',
attributes: ['id']
}, {
model: Post,
as: 'Retweet',
include: [{
model: User,
attributes: ['id', 'nickname']
}, {
model: Image
}]
}]
})
res.status(200).json(fullPost)
} catch (error) {
console.error(error)
next(error)
}
})
router.post('/:postId/retweet', isLoggedIn, async (req, res, next) => { // POST /post/1/retweet
try {
const post = await Post.findOne({
where: { id: req.params.postId },
include: [{
model: Post,
as: 'Retweet'
}]
})
if (!post) {
return res.status(403).send('존재하지 않는 게시글입니다.')
}
if (req.user.id === post.UserId || (post.Retweet && post.Retweet.UserId === req.user.id)) {
return res.status(403).send('자신의 글은 리트윗할 수 없습니다.')
}
const retweetTargetId = post.RetweetId || post.id
const exPost = await Post.findOne({
where: {
UserId: req.user.id,
RetweetId: retweetTargetId
}
})
if (exPost) {
return res.status(403).send('이미 리트윗했습니다.')
}
const retweet = await Post.create({
UserId: req.user.id,
RetweetId: retweetTargetId,
content: 'retweet'
})
const retweetWithPrevPost = await Post.findOne({
where: { id: retweet.id },
include: [{
model: Post,
as: 'Retweet',
include: [{
model: User,
attributes: ['id', 'nickname']
}]
}, {
model: User,
attributes: ['id', 'nickname']
}, {
model: Image
}, {
model: Comment,
include: [{
model: User,
attributes: ['id', 'nickname']
}]
}, {
model: User,
as: 'Likers',
attributes: ['id']
}, {
model: Post,
as: 'Retweet',
include: [{
model: User,
attributes: ['id', 'nickname']
}, {
model: Image
}]
}]
})
res.status(201).json(retweetWithPrevPost)
} catch (error) {
console.error(error)
next(error)
}
})
router.patch('/:postId/like', isLoggedIn, async (req, res, next) => { // PATCH /post/1/like
try {
const post = await Post.findOne({ where: { id: req.params.postId }})
if (!post) {
return res.status(403).send('게시글이 존재하지 않습니다.')
}
await post.addLikers(req.user.id)
res.json({ PostId: post.id, UserId: req.user.id })
} catch (error) {
console.error(error)
next(error)
}
})
router.delete('/:postId/like', isLoggedIn, async (req, res, next) => { // DELETE /post/1/like
try {
const post = await Post.findOne({ where: { id: req.params.postId }})
if (!post) {
return res.status(403).send('게시글이 존재하지 않습니다.')
}
await post.removeLikers(req.user.id)
res.json({ PostId: post.id, UserId: req.user.id })
} catch (error) {
console.error(error)
next(error)
}
})
router.delete('/:postId', isLoggedIn, async (req, res, next) => { // DELETE /post/10
try {
await Post.destroy({
where: {
id: req.params.postId,
UserId: req.user.id
}
})
res.json({ PostId: parseInt(req.params.postId, 10) })
} catch (error) {
console.error(error)
next(error)
}
})
module.exports = router
reducers/ post.js
import produce from 'immer'
export const initialState = {
mainPosts: [],
singlePost: null,
imagePaths: [],
hasMorePosts: true,
likePostLoading: false,
likePostDone: false,
likePostError: null,
unlikePostLoading: false,
unlikePostDone: false,
unlikePostError: null,
loadPostLoading: false,
loadPostDone: false,
loadPostError: null,
loadPostsLoading: false,
loadPostsDone: false,
loadPostsError: null,
addPostLoading: false,
addPostDone: false,
addPostError: null,
removePostLoading: false,
removePostDone: false,
removePostError: null,
addCommentLoading: false,
addCommentDone: false,
addCommentError: null,
uploadImagesLoading: false,
uploadImagesDone: false,
uploadImagesError: null,
retweetLoading: false,
retweetDone: false,
retweetError: null
}
export const UPLOAD_IMAGES_REQUEST = 'UPLOAD_IMAGES_REQUEST'
export const UPLOAD_IMAGES_SUCCESS = 'UPLOAD_IMAGES_SUCCESS'
export const UPLOAD_IMAGES_FAILURE = 'UPLOAD_IMAGES_FAILURE'
export const LIKE_POST_REQUEST = 'LIKE_POST_REQUEST'
export const LIKE_POST_SUCCESS = 'LIKE_POST_SUCCESS'
export const LIKE_POST_FAILURE = 'LIKE_POST_FAILURE'
export const UNLIKE_POST_REQUEST = 'UNLIKE_POST_REQUEST'
export const UNLIKE_POST_SUCCESS = 'UNLIKE_POST_SUCCESS'
export const UNLIKE_POST_FAILURE = 'UNLIKE_POST_FAILURE'
export const LOAD_POSTS_REQUEST = 'LOAD_POSTS_REQUEST'
export const LOAD_POSTS_SUCCESS = 'LOAD_POSTS_SUCCESS'
export const LOAD_POSTS_FAILURE = 'LOAD_POSTS_FAILURE'
export const LOAD_POST_REQUEST = 'LOAD_POST_REQUEST'
export const LOAD_POST_SUCCESS = 'LOAD_POST_SUCCESS'
export const LOAD_POST_FAILURE = 'LOAD_POST_FAILURE'
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 REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST'
export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS'
export const REMOVE_POST_FAILURE = 'REMOVE_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'
export const RETWEET_REQUEST = 'RETWEET_REQUEST'
export const RETWEET_SUCCESS = 'RETWEET_SUCCESS'
export const RETWEET_FAILURE = 'RETWEET_FAILURE'
export const REMOVE_IMAGE = 'REMOVE_IMAGE'
export const addPost = (data) => ({
type: ADD_POST_REQUEST,
data
})
export const addComment = (data) => ({
type: ADD_COMMENT_REQUEST,
data
})
const reducer = (state = initialState, action) => {
return produce(state, (draft) => {
switch (action.type) {
case REMOVE_IMAGE:
draft.imagePaths = draft.imagePaths.filter((v, i) => i !== action.data)
break
case RETWEET_REQUEST:
draft.retweetLoading = true
draft.retweetDone = false
draft.retweetError = null
break
case RETWEET_SUCCESS: {
draft.retweetLoading = false
draft.retweetDone = true
draft.mainPosts.unshift(action.data)
break
}
case RETWEET_FAILURE:
draft.retweetLoading = false
draft.retweetError = action.error
break
case UPLOAD_IMAGES_REQUEST:
draft.uploadImagesLoading = true
draft.uploadImagesDone = false
draft.uploadImagesError = null
break
case UPLOAD_IMAGES_SUCCESS: {
draft.imagePaths = action.data
draft.uploadImagesLoading = false
draft.uploadImagesDone = true
break
}
case UPLOAD_IMAGES_FAILURE:
draft.uploadImagesLoading = false
draft.uploadImagesError = action.error
break
case LIKE_POST_REQUEST:
draft.likePostLoading = true
draft.likePostDone = false
draft.likePostError = null
break
case LIKE_POST_SUCCESS: {
const post = draft.mainPosts.find((v) => v.id === action.data.PostId)
post.Likers.push({ id: action.data.UserId })
draft.likePostLoading = false
draft.likePostDone = true
break
}
case LIKE_POST_FAILURE:
draft.likePostLoading = false
draft.likePostError = action.error
break
case UNLIKE_POST_REQUEST:
draft.unlikePostLoading = true
draft.unlikePostDone = false
draft.unlikePostError = null
break
case UNLIKE_POST_SUCCESS: {
const post = draft.mainPosts.find((v) => v.id === action.data.PostId)
post.Likers = post.Likers.filter((v) => v.id !== action.data.UserId)
draft.likePostLoading = false
draft.likePostDone = true
break
}
case UNLIKE_POST_FAILURE:
draft.unlikePostLoading = false
draft.unlikePostError = action.error
break
case LOAD_POST_REQUEST:
draft.loadPostLoading = true
draft.loadPostDone = false
draft.loadPostError = null
break
case LOAD_POST_SUCCESS:
draft.singlePost = action.data
draft.loadPostLoading = false
draft.loadPostDone = true
break
case LOAD_POST_FAILURE:
draft.loadPostLoading = false
draft.loadPostError = action.error
break
case LOAD_POSTS_REQUEST:
draft.loadPostsLoading = true
draft.loadPostsDone = false
draft.loadPostsError = null
break
case LOAD_POSTS_SUCCESS:
draft.mainPosts = draft.mainPosts.concat(action.data)
draft.loadPostsLoading = false
draft.loadPostsDone = true
draft.hasMorePosts = action.data.length === 10
break
case LOAD_POSTS_FAILURE:
draft.loadPostsLoading = false
draft.loadPostsError = action.error
break
case ADD_POST_REQUEST:
draft.addPostLoading = true
draft.addPostDone = false
draft.addPostError = null
break
case ADD_POST_SUCCESS:
draft.mainPosts.unshift(action.data)
draft.addPostLoading = false
draft.addPostDone = true
draft.imagePaths = []
break
case ADD_POST_FAILURE:
draft.addPostLoading = false
draft.addPostError = action.error
break
case REMOVE_POST_REQUEST:
draft.removePostLoading = true
draft.removePostDone = false
draft.removePostError = null
break
case REMOVE_POST_SUCCESS:
draft.removePostLoading = false
draft.removePostDone = true
draft.mainPosts = draft.mainPosts.filter((v) => v.id !== action.data.PostId)
break
case REMOVE_POST_FAILURE:
draft.removePostLoading = false
draft.removePostError = action.error
break
case ADD_COMMENT_REQUEST:
draft.addCommentLoading = true
draft.addCommentDone = false
draft.addCommentError = null
break
case ADD_COMMENT_SUCCESS: {
const post = draft.mainPosts.find((v) => v.id === action.data.PostId)
post.Comments.unshift(action.data)
draft.addCommentLoading = false
draft.addCommentDone = true
break
}
case ADD_COMMENT_FAILURE:
draft.addCommentLoading = false
draft.addCommentError = action.error
break
default:
break
}
})
}
export default reducer
sagas/ post.js
import axios from 'axios'
import { all, delay, put, takeLatest, fork, throttle, call } from "redux-saga/effects";
import shortId from 'shortid';
import {
ADD_POST_FAILURE, ADD_POST_SUCCESS, ADD_COMMENT_SUCCESS,
ADD_COMMENT_FAILURE, ADD_POST_REQUEST, ADD_COMMENT_REQUEST,
REMOVE_POST_FAILURE, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS,
LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, LOAD_POSTS_FAILURE,
LIKE_POST_REQUEST, UNLIKE_POST_REQUEST, LIKE_POST_SUCCESS,
LIKE_POST_FAILURE, UNLIKE_POST_SUCCESS, UNLIKE_POST_FAILURE,
UPLOAD_IMAGES_REQUEST, UPLOAD_IMAGES_SUCCESS, UPLOAD_IMAGES_FAILURE,
RETWEET_REQUEST, RETWEET_SUCCESS, RETWEET_FAILURE,
LOAD_POST_REQUEST, LOAD_POST_SUCCESS, LOAD_POST_FAILURE
} from '../reducers/post'
import { ADD_POST_TO_ME, REMOVE_POST_OF_ME } from '../reducers/user';
function addPostAPI(data) {
return axios.post('/post', data)
}
function* addPost(action) {
try {
const result = yield call(addPostAPI, action.data)
const id = shortId.generate()
yield put({
type: ADD_POST_SUCCESS,
data: result.data
})
yield put({
type: ADD_POST_TO_ME,
data: result.data.id
})
} catch (err) {
yield put({
type: ADD_POST_FAILURE,
error: err.response.data
})
}
}
function retweetAPI(data) {
return axios.post(`/post/${data}/retweet`, data)
}
function* retweet(action) {
try {
const result = yield call(retweetAPI, action.data)
yield put({
type: RETWEET_SUCCESS,
data: result.data
})
} catch (err) {
yield put({
type: RETWEET_FAILURE,
error: err.response.data
})
}
}
function uploadImagesAPI(data) {
return axios.post(`/post/images`, data)
}
function* uploadImages(action) {
try {
const result = yield call(uploadImagesAPI, action.data)
yield put({
type: UPLOAD_IMAGES_SUCCESS,
data: result.data
})
} catch (err) {
yield put({
type: UPLOAD_IMAGES_FAILURE,
error: err.response.data
})
}
}
function likePostAPI(data) {
return axios.patch(`/post/${data}/like`)
}
function* likePost(action) {
try {
const result = yield call(likePostAPI, action.data)
yield put({
type: LIKE_POST_SUCCESS,
data: result.data
})
} catch (err) {
yield put({
type: LIKE_POST_FAILURE,
error: err.response.data
})
}
}
function unlikePostAPI(data) {
return axios.delete(`/post/${data}/like`)
}
function* unlikePost(action) {
try {
const result = yield call(unlikePostAPI, action.data)
yield put({
type: UNLIKE_POST_SUCCESS,
data: result.data
})
} catch (err) {
yield put({
type: UNLIKE_POST_FAILURE,
error: err.response.data
})
}
}
function loadPostsAPI(lastId) {
return axios.get(`/posts?lastId=${lastId || 0}`)
}
function* loadPosts(action) {
try {
const result = yield call(loadPostsAPI, action.lastId)
yield put({
type: LOAD_POSTS_SUCCESS,
data: result.data
})
} catch (err) {
yield put({
type: LOAD_POSTS_FAILURE,
error: err.response.data
})
}
}
function loadPostAPI(data) {
return axios.get(`/post/${data}`)
}
function* loadPost(action) {
try {
const result = yield call(loadPostAPI, action.data)
yield put({
type: LOAD_POST_SUCCESS,
data: result.data
})
} catch (err) {
yield put({
type: LOAD_POST_FAILURE,
error: err.response.data
})
}
}
function removePostAPI(data) {
return axios.delete(`/post/${data}`)
}
function* removePost(action) {
try {
const result = yield call(removePostAPI, action.data)
yield put({
type: REMOVE_POST_SUCCESS,
data: result.data
})
yield put({
type: REMOVE_POST_OF_ME,
data: action.data
})
} catch (err) {
yield put({
type: REMOVE_POST_FAILURE,
error: err.response.data
})
}
}
function addCommentAPI(data) {
return axios.post(`/post/${data.postId}/comment`, data) // POST /post/1/comment
}
function* addComment(action) {
try {
const result = yield call(addCommentAPI, action.data)
yield put({
type: ADD_COMMENT_SUCCESS,
data: result.data
})
} catch (err) {
console.error(error)
yield put({
type: ADD_COMMENT_FAILURE,
error: err.response.data
})
}
}
function* watchRetweet() {
yield takeLatest(RETWEET_REQUEST, retweet)
}
function* watchUploadImages() {
yield takeLatest(UPLOAD_IMAGES_REQUEST, uploadImages)
}
function* watchLikePost() {
yield takeLatest(LIKE_POST_REQUEST, likePost)
}
function* watchUnlikePost() {
yield takeLatest(UNLIKE_POST_REQUEST, unlikePost)
}
function* watchAddPost() {
yield takeLatest(ADD_POST_REQUEST, addPost)
}
function* watchLoadPosts() {
yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts)
}
function* watchLoadPost() {
yield takeLatest(LOAD_POST_REQUEST, loadPost)
}
function* watchRemovePost() {
yield takeLatest(REMOVE_POST_REQUEST, removePost)
}
function* watchAddComment() {
yield takeLatest(ADD_COMMENT_REQUEST, addComment)
}
export default function* postSaga() {
yield all([
fork(watchRetweet),
fork(watchUploadImages),
fork(watchLikePost),
fork(watchUnlikePost),
fork(watchAddPost),
fork(watchLoadPosts),
fork(watchLoadPost),
fork(watchRemovePost),
fork(watchAddComment)
])
}
pages/post/ [id].js
import axios from "axios"
import { useRouter } from "next/router"
import { useSelector } from "react-redux"
import { END } from 'redux-saga'
import AppLayout from "../../components/AppLayout"
import PostCard from "../../components/PostCard"
import { LOAD_POST_REQUEST } from "../../reducers/post"
import { LOAD_MY_INFO_REQUEST } from "../../reducers/user"
import wrapper from "../../store/configureStore"
const Post = () => {
const router = useRouter()
const { id } = router.query
const { singlePost } = useSelector((state) => state.post)
return (
<AppLayout>
<PostCard post={singlePost} />
</AppLayout>
)
}
export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
const cookie = context.req ? context.req.headers.cookie : '';
console.log(context)
axios.defaults.headers.Cookie = '';
if (context.req && cookie) {
axios.defaults.headers.Cookie = cookie
}
context.store.dispatch({
type: LOAD_MY_INFO_REQUEST
})
context.store.dispatch({
type: LOAD_POST_REQUEST,
data: context.params.id
})
context.store.dispatch(END)
await context.store.sagaTask.toPromise()
})
export default Post
입니다
답변 1
0
1번 포스트가 실제로 db에 존재하나요?
0
아 말씀해주신 내용 토대로 확인하니 완전히 제가 착각하고 있었습니다. 해결은 했습니다만
그동안 강의들을 보면서 에러가 발생할때마다 경우에따라 게시글 db를 전체 삭제한경우가 있었는데
저는 그동안 전체 삭제후 id가 다시 1부터 시작하는줄 알았습니다.
그런데 워크벤치를 통해 확인해보니 db에서 삭제한 게시글들의 id가 고유하게 남아있는지 그 뒤로 계속해서 추가된걸 모르고 있었습니다. 결국 새로 생성한 게시글 id로 post주소에 입력하니 정상적으로 동작되는것으로 확인됐습니다. 소중한 시간내주셔서 너무 감사합니다.
혹시 게시글을 전체삭제한후 id를 1부터 다시 생성되게 할 방법은 없을까요?
0
auto_increment를 1로 초기화해야하는데 sql문을 사용해야 합니다. 그런데 id에 너무 신경쓰실필요는 없습니다. id가 연속적이면 예측이 돼서 문제가 되는 경우도 있습니다.
넥스트 버젼 질문
0
90
2
로그인시 401 Unauthorized 오류가 뜹니다
0
104
1
무한 스크롤 중 스크롤 튐 현상
0
191
1
특정 페이지 접근을 막고 싶을 때
0
116
2
createGlobalStyle의 위치와 영향범위
0
102
2
인라인 스타일 리렌더링 관련
0
97
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
358
1
url 오류 질문있습니다
0
214
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
390
1
sudo certbot --nginx 에러
0
1292
2
Minified React error 콘솔에러 (hydrate)
0
477
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
255
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
335
1
npm run build 에러
0
525
1
front 서버 npm run build 중에 발생한 에러들
0
398
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
350
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
290
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
249
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
206
1