댓글기능 구현 중에 input 초기화 질문...

[김동아]

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 월 전에 수정됐습니다.

[codingapple]

input에 value={comment} 넣어봅시다

[김동아]

오오 해결했습니다!감사합니다

[글쓴이]

글