Не получается написать локальное добавление комментария после нажатия на кнопку "Добавить". С сервером взаимодействует нормально, после обновления страницы коммент появляется, а как сделать, чтобы комментарий отобразился сразу? Код прикрепляю ниже
const Comments = () => {
let textInput = React.createRef()
const { isAuthorized } = useContext(MyContext)
const { videoIdCC, isFetching, userData } = useContext(WatchContext)
console.log(videoIdCC, )
const addComment = () =>{
if(!isAuthorized) return window.location.href = '/logreg1';
let commentForm = document.forms["commentForm"];
let commentText = commentForm.elements["commentText"].value;
fetch("/api/comments/" + videoIdCC,
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({"data": commentText})
}).then (res=>res.json())
.then(result=>{console.log(result)})
}
// const [isFetching, setIsFetching] = useState(true);
let [comments, setComments] = useState({});
useEffect(() => {
fetch('/api/comments/' + videoIdCC)
.then(result => result.json())
.then(result => {
console.log(result);
setComments(comments = result)
// setIsFetching(!isFetching)
})
}, [])
if(isFetching){
return <> Loading...</>
}
else return (
<>
<div className="CommentForm">
<form id="commentForm">
<div className="ProfileImg">
<img
width={"48"}
height={"48"}
//src={skeleton}
id={"cha-img"}
alt={""}
/>
</div>
<textarea id="commentText" type="text" placeholder="Добавить комментарий" className="InputComment" ref={textInput}></textarea>
<div className="ccd">
<Button onClick={ e => { e.preventDefault(); addComment(); }}>Добавить</Button>
</div>
</form>
</div>
<div className="Comments">
{Object.keys(comments).map(key => (
<div key={key} className="CommentInfo">
<div className="ProfileImg">
<img
width={"48"}
height={"48"}
src={""}
id={"cha-img"}
alt={""}
/>
</div>
{console.log(comments[key])}
<div className="CommentText">
<div className="CommentatorNick">
{/* {(comments[key].commentatorID).includes(userData?._id)} */}
{comments[key].commentatorID}
</div>
{/* {comment} */}
{comments[key].data}
</div>
</div>
))}
</div>
</>
)
}
comments
не меняется, так какsetComments
вызывается только в эффекте, а эффект срабатывает только один раз при первом рендере.