next13 댓글 불러오기 - 2.2var

강의용 코드 

코멘트 컴포넌트

'use client'
import { useEffect, useState } from 'react';


const Comment = ({itemId,email}:any) => {
    const [comment, setComment] = useState('')
    const [reply, setReply]:any = useState([])

    useEffect(() => {//공부용 자체 코드에서 강의용 코드로 바뀐것 
        fetch(`/api/comment/list?id=${itemId}`).then(r=>r.json())
        .then((result)=>{
            setReply(result)
        })
    }, [itemId])
    
    const handleCommentSubmit = () => {
        const noSpacesComment = comment.replace(/\s/g, ''); // 입력한 문자열에서 모든 공백을 제거
        if(noSpacesComment == '') return alert('댓글을 작성하세요.')


        fetch('/api/post/comment', {
          method: 'POST',
          body: JSON.stringify({ comment: comment, _id: itemId }),
        })
          .then((r):any => {
            if (r.status === 401) return alert('로그인해주세요');
            // 댓글 전송 후 댓글 데이터를 다시 가져와서 화면을 갱신 아래 replyNum 중요.
            return fetch(`/api/comment/list?id=${itemId}`, {
              method: 'GET',
            });
          })
          .then((response) => response.json())
          .then((data) => {
            setReply(data);
            setComment(''); // 댓글 전송 후 입력란 초기화
          })
          .catch((error) => {
            console.error('Error:', error);
          });
      };

    return (
    <div>
        <div>
            <ul>
              
                {
                reply.length > 0 ?
                reply.map((item:any, index:any)=>(
                    <li key={index}><p>작성자 - {email}</p>{item.content}</li>
                )) : <p>댓글없음</p>
              }
            </ul>
        </div>
        <input value={comment} onChange={(e)=>{setComment(e.target.value)}}/>
        <button onClick={handleCommentSubmit}>댓글전송</button>
    </div>
    );
};

export default Comment;

api용 코드 추가.

공부용 코멘트 api 안에넣어서 불러오는게아니라

아예 새로운 api 파일을 만들어서 불러온다 comment api 폴더 생성후 list.tsx api파일생성

import { connectDB } from '@/util/database';
import { ObjectId } from 'mongodb';

const list = async(요청:any,응답:any) => {
    let result = await (await connectDB).db("forum").collection('comment').find({parent:new ObjectId(요청.query.id)}).toArray();

    응답.status(200).json(result)
};

export default list;

이렇게 하니까 배열 끝에 '' 공백이없다.

내코드에서 api 에서 푸쉬를 한것이 원인인것같다.