input에 값을 입력하고 '댓글 전송'을 누르면 input 값이 초기화되게 하려고
setComment('');라고 작성했는데 왜 안될까요 ㅠㅠ?
'use client'
import { useState,useEffect } from "react"
export default function Comment(props){
let [comment,setComment] = useState('');
let [data,setData]=useState([])
useEffect(()=>{
fetch(`/api/comment/list?id=${props._id}`)
.then(r=>r.json())
.then((result)=>{
console.log(result)
setData(result)
})
},[])
const handleCommentSubmit=()=>{
fetch('/api/comment/new',{
method:'POST',
body:JSON.stringify({comment: comment, _id:props._id})
}).then(()=>{
fetch(`/api/comment/list?id=${props._id}`).then(r=>r.json())
.then(result=>{
setData(result);
setComment(''); // 입력값을 초기화
})
})
.catch((error)=>console.log(error))
}
return(
<div style={{padding:"15px"}}>
<div>댓글</div>
<div>
<div style={{padding:"5px"}}>
<input onChange={(e)=>{ setComment(e.target.value) }} style={{width:"500px",
fontSize:"20px"}}/>
<button onClick={handleCommentSubmit} style={{width:"100px",fontSize:"20px",marginLeft:"10px"}}>댓글전송</button>
</div>
<ul style={{ listStyleType: "none", padding: "0" }}>
{data.length > 0 ?
data.map((a,i)=>
<profile style={{height: "auto",
display: "flex",
border:"0.5px solid gray",
padding:"5px"}}>
<div>
< img src='/user.png' style={{ width: "45px", paddingTop: "15px" }} alt="user" />
</div>
<info style={{ padding:"0 0 0 10px",
display: "flex",flexDirection:"column"}}>
<p style={{ borderBottom: "1px solid lightgray"}}></p>
<div style={{ display: "flex" }}>
<p key={i}>{a.content}</p>
<span>{a.author_name}</span>
</div>
</info>
</profile>
): '댓글 없음'}
</div>
</div>
)
}
-
이 게시글은
김동아에 의해 1 년, 1 월 전에 수정됐습니다.
-
이 게시글은
김동아에 의해 1 년, 1 월 전에 수정됐습니다.