node.js - 如何在 react.js 中获取这些注释数组的值？

Question

我想获得我在反应应用程序中的评论数组的值。这是发生了什么：我有来自我的节点 api 的帖子。每个帖子都有一系列评论。我映射到评论数组并将它们显示在我正在构建的博客应用程序的评论部分。用户能够删除他或她所做的评论是其中一项功能。因此，当用户选择要编辑的评论时，我还想获取当前文本值并将其显示在文本框中，以便用户可以根据需要进行编辑。我当前的代码是这样工作的：当用户单击编辑按钮时，它会更改为编辑模式，而不会获取注释框中的先前文本。这是我的代码：

import { useLocation } from 'react-router';
import React, {useEffect, useState, useContext} from 'react';
import axios from 'axios';
import {Context} from "../../context/Context"
import "./comment.css"



 export default function Comments() {
    const PF = "http://localhost:5000/images/";
    const {user, getPost} = useContext(Context)
    const location = useLocation()
    const path = location.pathname.split("/")[2];
   const [comments, setComments] = useState([]);
   const [updateComment, setUpdateComment] = useState(false);
  const [commentdescription2, setCommentDescription] = useState()


 useEffect(() => {
    const getPost = async () =>{  //I fetched the array of comments from the post
        try{
             const response = await axios.get("/posts/"+path )
             setComments(response.data.comments)//it is assigned to comments as a useState
          

        }catch(err){
            console.log(err)
        }
    }
   getPost()
   }, [path])


   //Function to handle comment update. Comments get updated with the new texts actually
  //but old text values are not gotten on the textbox


  const handleCommentUpdate = async (id) =>{
 

  try{
    await axios.put("/posts/"+ path + "/comment/" + id, {
         author: user._id, 
         commentdescription:  commentdescription2,
    })
     window.location.reload()
   }catch(err){
    console.log(err)
  }
  }

return (
    <div className="comment">
        <h5 className='users-comment'>Users comments</h5>
            {comments.map((singleComment, index)=>{
                //console.log(singleComment)
                const {author, commentdescription, _id, createdAt} = singleComment
                
                return(
                    <>

                        {updateComment == _id ? 
                         <div className='comment-div' key={_id} >
        
                    <textarea className='comment-wrapper' type='text' 
                    onChange={(e) => setCommentDescription(e.target.value)} value={commentdescription2}> //if I use commentdescription, I get the old text value but I cant edit it
                  //if I use commentdescription2, I can edit the textbox and update but have    no access to the old comment text

                    </textarea>
                    <button className='comment-btn'onClick={() => handleCommentUpdate(_id)}>Update Post</button>
                    </div>
                        :
                         <div className='displayed-comments'key={_id}>
                            
                            <div className="commentPic">
                                
                                <img className="user-pics" src={PF +  singleComment.author.profilePicture} alt="" />
                                  
                            </div>
                            <div className="comment-info">
                                <div className="comment-author-div">
                                    <div className='comment-author-date-info'>
                                        <h4 className="comment-author">{singleComment.author.username}</h4>
                                         <p className="comment-date">{new  Date(singleComment.createdAt).toDateString()}
                                            </p>
                                    </div>
                                    <div className="comment-edit-delete-div">
                                         <i className="singlePostIcon fas fa-edit"  onClick={() => setUpdateComment(_id)}  ></i>
                                            <i className="singlePostIcon far fa-trash-alt"   ></i>

                                    </div>
                                   
                                </div>
                                <p className="comment-content">  {singleComment.commentdescription}</p>
                            </div>
                            
                        </div>
                    
                        }
                         </>
                )
          
            })}

    </div>
    )
    }

标签： node.jsreactjs