react,node,mysql로 댓글 기능 구현 중인데 ㅠㅠ

Question

지금 댓글 기능 구현 중입니다 근데 댓글을 작성을 하면 db에는 저장 되는데 화면에는 나오지가 않아요 ㅠㅠㅠㅠ댓글 기능이 있는 코드 import {Link, useLocation, useNavigate} from 'react-router-dom'; import Navbar from '../components/Navbar'; import styles from './Single.module.css'; import user from '../image/user.png'; import { useContext, useEffect, useState } from 'react'; import axios from 'axios'; import { AuthContext } from '../context/authContext'; import ReactQuill from 'react-quill'; const Single = () => { const state = useLocation().state; const [post,setPost] = useState([]) const [chat, setChat] = useState([]); // 초기값 설정 const [value, setValue] = useState(state?.title || ''); const location = useLocation() const navigate = useNavigate() const postId = location.pathname.split("/")[2] const {currentUser} = useContext(AuthContext) useEffect(() => { const fetchData = async () => { try{ const res = await axios.get(`/posts/${postId}`) setPost(res.data) console.log(res.data); }catch(err) { console.log(err) } } fetchData(); },[postId]) const hadleDelete = async () => { try { await axios.delete(`/posts/${postId}`); navigate("/") }catch(err) { console.log(err) } } useEffect(() => { const fetchData = async () => { try{ const res = await axios.get(`/chat/${postId}`) setChat(res.data) console.log(res.data); }catch(err) { console.log(err) } } fetchData(); },[postId]) const getText = (html) => { const doc = new DOMParser().parseFromString(html, 'text/html') return doc.body.textContent; } const handleClick = async (e) => { e.preventDefault(); try { if (state) { // 기존 댓글 업데이트 await axios.put(`/chat/${state.id}`, { content: value, }); } else { // 새 댓글 추가 await axios.post(/chat/, { content: value, }); } // 댓글 작성 후 해당 게시물 페이지로 이동 navigate(`/post/${post.id}`); } catch (err) { console.log(err); } }; return(

{post.username}

{currentUser.username === post.username &&

수정 삭제

}

{post.title}

강의 소개

{getText(post.desc)}

댓글 작성

//댓글

{getText(chat.content)}

) } export default Single;여기서 부턴 서버입니다index.jsimport express from "express" import authRoutes from "./routes/auth.js" import userRoutes from "./routes/users.js" import postRoutes from "./routes/posts.js" import chatRoutes from "./routes/chat.js" import cookieParser from "cookie-parser" import multer from "multer" const app = express() app.use(express.json()) app.use(cookieParser()) const storage = multer.diskStorage({ destination : function (req, file, cb) { cb(null, '../ps/public/upload') }, filename : function (req, file, cb) { cb(null, Date.now() + file.originalname) } }) const upload = multer({storage}) app.post('/api/upload',upload.single('file'),function(req,res) { const file = req.file; res.status(200).json(file.filename) }) app.use("/api/auth", authRoutes) app.use("/api/users", userRoutes) app.use("/api/posts", postRoutes) app.use("/api/chat", chatRoutes) app.listen(8800, () => { console.log("Connceted!") })routes/chat.jsimport express from "express"; import { addPost, deletePost, getPost, updatePost } from "../controllers/chat.js"; const router = express.Router() router.get("/:id", getPost) router.post("/", addPost) router.delete("/:id", deletePost) router.put("/:id", updatePost) export default routercontroller/chat.jsimport {db} from '../db.js'; import jwt from 'jsonwebtoken' export const getPost = (req,res) => { const q = "SELECT p.id, `username`, `content` FROM users u JOIN chat p ON u.id = p.userid WHERE p.id = ?"; db.query(q,[req.params.id], (err,data) => { if(err) return res.status(500).json(err) return res.status(200).json(data[0]) }) } export const addPost = (req,res) => { const token = req.cookies.access_token if(!token) return res.status(401).json("Not authenticated!") jwt.verify(token, "jwtkey", (err,userInfo) => { if(err) return res.status(403).json('Token is not vaild!'); const q = "INSERT INTO chat(`content`,`userid`) VALUES (?)" const values = [ req.body.desc, userInfo.id ] db.query(q,[values], (err,data) => { if(err) return res.status(500).json(err); return res.json("Post has been created.") }) }); } export const deletePost = (req,res) => { const token = req.cookies.access_token if(!token) return res.status(401).json("Not authenticated!") jwt.verify(token, "jwtkey", (err,userInfo) => { if(err) return res.status(403).json('Token is not vaild!'); const postId = req.params.id const q = "DELETE FROM chat WHERE `id` = ? AND `userid` = ?" db.query(q,[postId,userInfo.id], (err,data) => { if(err) return res.status(403).json("You can delete only your post!") return res.json("Post has been deleted!") }) }) } export const updatePost = (req,res) => { const token = req.cookies.access_token if(!token) return res.status(401).json("Not authenticated!") jwt.verify(token, "jwtkey", (err,userInfo) => { if(err) return res.status(403).json('Token is not vaild!'); const postId = req.params.id const q = "UPDATE chat SET `content` = ? WHERE `id` = ? AND `userid` = ?" const values = [ req.body.desc, ] db.query(q,[...values, postId, userInfo.id], (err,data) => { if(err) return res.status(500).json(err); return res.json("Post has been updated.") }) }); }

프론트새싹입니다 · Answer

댓글 데이터가 어떤 형태로 넘어오나요?

react,node,mysql로 댓글 기능 구현 중인데 ㅠㅠ

1개의 답변

Q&A 목록