리액트에서 DB 값을 어떻게 가져올까요?

Question

CommentLis.js

import React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; import palette from '../../styles/lib/palette' import Button from '../common/Button'; /** * 회원가입 또는 로그인 폼을 보여줍니다. */ const CommentListBlock = styled.div` // display:flex; // justify-content:space-evenly; h3 { margin: 0; color: ${palette.gray[8]}; margin-bottom: 1rem; } `; const CommentCard = styled.div` width: 40%; height:150px; background:#fff; box-shadow: 0px 14px 26px -11px #000; text-align:left; padding: 1rem; p { display:flex; justify-content:space-between; span { color: ${palette.gray[5]}; } } `; /** * 스타일링된 input */ const StyledInput = styled.input` font-size: 1rem; border: none; border-bottom: 1px solid ${palette.gray[5]}; padding-bottom: 0.5rem; outline: none; width: 100%; &:focus { color: $oc-teal-7; border-bottom: 1px solid ${palette.gray[7]}; } & + & { margin-top: 1rem; } `; const ButtonWithMarginTop = styled(Button)` margin-top: 1rem; `; /** * 에러를 보여줍니다 */ const ErrorMessage = styled.div` color: red; text-align: center; font-size: 0.875rem; margin-top: 1rem; `; // const CommentItem = styled.div` // ` const CommentItem = ({ comment }) => { const { publishedDate, user, body, _id } = comment; return ( <div> <h2> {/* <Link to={`/@${user.username}/${_id}`}>{title}</Link> */} </h2> {/* // username={user.username} // publishedDate={new Date(publishedDate)} */} {/* <Tags tags={tags} /> */} <p>{body}</p> </div> ) } const CommentList = ({ comments, error,loading, comment }) => { // if (error) { // return <CommentListBlock>에러가 발생했습니다.</CommentListBlock>; // } // const { body} = comment; return ( <CommentListBlock> {/* <h2>댓글</h2> */} {!loading && comments && ( <div> {comments.map(comment => ( <CommentItem comment={comment} key={comment.comments}/> ))} </div> )} {/* map of null 은 위의 loading 조건식이 필요함. */} </CommentListBlock> ); }; export default CommentList;

CommentListContainer.js

import React, { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import CommentList from '../../components/comments/CommentList'; import { listComments } from '../../modules/comments'; const CommentListContainer = ({ location, match }) => { const dispatch = useDispatch(); const { comments, error, loading, user } = useSelector( ({ comments, loading, user }) => ({ comments: comments.comments, error: comments.error, loading: loading['comments/LIST_COMMNTS'], user: user.user, }), ); useEffect(() => { dispatch(listComments({ body, username })); }, [dispatch ]); return ( <CommentList loading={loading} error={error} comments={comments} showWriteButton={user} /> ); }; export default withRouter(CommentListContainer); // const fetchData = async () => { // try { // const response = await Axios.get( // `http://localhost:4000/api/comment/`, // ); // setComments(response.data.comments); // } catch (e) { // console.log(e); // }; // }; // fetchData() // }, []);

lib/api/comment.js

iimport client from './client'; export const write = ({ body }) => client.post('/api/comment/write', { body }); export const listComments = ({ body, id }) => { // const queryString = qs.stringify({ client.post('/api/comment/listComments', { body, id , }); };

createRequestSage.js

import { call, put } from 'redux-saga/effects'; import { startLoading, finishLoading } from '../modules/loading'; export const createRequestActionTypes = type => { const SUCCESS = `${type}_SUCCESS`; const FAILURE = `${type}_FAILURE`; return [type, SUCCESS, FAILURE]; }; export default function createRequestSaga(type, request) { const SUCCESS = `${type}_SUCCESS`; const FAILURE = `${type}_FAILURE`; return function*(action) { yield put(startLoading(type)); // 로딩 시작 try { const response = yield call(request, action.payload); yield put({ type: SUCCESS, payload: response.data }); } catch (e) { yield put({ type: FAILURE, payload: e, error: true }); } yield put(finishLoading(type)); // 로딩 끝 }; }

현재 포스트맨으로 서버에 요청했을땐 JSON형식으로 잘가져와지는데

VIEW에서 댓글 리스트를 뿌리질 못하네요.. 제가 봤을때는 컨테이너에 문제가 있는거같은데

뭐가 문제인지 모르겠습니다 ..

Answer 1

일단, client.post(댓글API주소)가 맞나요? client.get이 아닌가요? 보통 가져올 때는 get을 많이 하기에 이 부분이 의심됩니다. 그리고 redux-devtools는 설치하셨나요? LISTCOMMNTS_SUCCESS가 실행되고 있는지 아닌지에 따라 에러 찾는 방법이 많이 달라질 것 같습니다.