Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/mercurial/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 删除目标注释时遇到ISSUE_Javascript_Node.js_Reactjs_Mongodb_Express - Fatal编程技术网

Javascript 删除目标注释时遇到ISSUE

Javascript 删除目标注释时遇到ISSUE,javascript,node.js,reactjs,mongodb,express,Javascript,Node.js,Reactjs,Mongodb,Express,单击删除按钮时,控制台中会记录正确的注释id和文本。 但在删除之前请先删除评论。 这意味着目标id在单击和删除之间发生变化 Toggler组件切换删除按钮- 列表帖子已映射到创建: 组件{文章标题、正文、喜欢、评论} 注释组件的代码: import React, { Fragment, useState, useEffect } from "react"; import "../../styles/posts/postComponent.scss"; import { connect }

单击删除按钮时,控制台中会记录正确的注释
id
和文本。
但在删除之前请先删除评论。
这意味着目标
id
在单击和删除之间发生变化

Toggler组件切换删除按钮- 列表帖子已映射到创建:
组件{文章标题、正文、喜欢、评论}

注释组件的代码:

import React, { Fragment, useState, useEffect } from "react";
import "../../styles/posts/postComponent.scss";   
import { connect } from "react-redux";
import { removeComment } from "../../redux/actions/@posts";
import PropTypes from "prop-types";

const Comment = ({ admin, auth, post_id, removeComment, comments }) => {
const commentList = comments
? comments.map(comment => {
    return (
      <div className='c-img-text'>
        <img
          className='c-img'
          height={"40px"}
          src={comment.avatar}
          alt='pic'
          onClick={() => console.log(comment.avatar)}
        />
        <div className='c-nt'>
          <a href='#' className='c-n'>
            {comment.name}
          </a>
          <span className='c-t'>{comment.text.toString()}</span>
          <i className='c-d'>{comment.date}</i>
        </div>

        <Toggler
          auth={auth}
          pst_id={post_id}
          adm_id={admin._id}
          cmt_id={comment._id}
          cmt_user={comment.user}
          removeComment={removeComment}
          cmt_txt={comment.text}
        />
      </div>
    );
  })
 : "";
return (
<Fragment>
  <div className='c-container'>{commentList}</div>
</Fragment>
);
};

  const Toggler = ({
  auth,
  pst_id,
  adm_id,
  cmt_id,
  cmt_txt,
  cmt_user,
  removeComment
  }) => {
  const [showDelete, setShowDelete] = useState(false);
  const deleteComment = cmt_id => {
  removeComment(pst_id, cmt_id);
  console.log(cmt_txt, cmt_id, pst_id);
  };
  return (
    <div onClick={() => setShowDelete(!showDelete)}>
  {auth && adm_id ? adm_id === cmt_user && <div>...</div> : ""}
  {showDelete && (
    <div
      className='c-delete'
      onClick={async () => await deleteComment(cmt_id)}
    >
      icon
    </div>
  )}
</div>
 );
 };

  Comment.propTypes = {
   admin: PropTypes.object.isRequired,
   auth: PropTypes.bool.isRequired,
   post_id: PropTypes.object.isRequired,
   removeComment: PropTypes.func.isRequired,
   comments: PropTypes.object.isRequired
  };
 const mapStateToProps = state => {
             return { state };
          };
export default connect(mapStateToProps, { removeComment })(Comment);
后端代码:

  //@route DELETE api/posts/comments/:post_id/:comment_id
  //@desc remove a comment
  //@access Private
  const removeComment = async (req, res) => {
  try {
    const post = await Post.findById(req.params.post_id);

    //Pull out comment
    const comment = post.comments.find(
   comment => comment.id === req.params.comment_id
    );
    //make sure comment exists
    if (!comment) {
     res.status(404).json({ error: "Comment does not exist" });
     }

    //check admin
     if (comment.user.toString() !== req.admin.id) {
     return res.status(401).json({ msg: "User not authorized" });
     }

    //Get remove index
    const removeIndex = post.comments
    .map(comment => comment.user.toString())
    .indexOf(req.admin.id);

    post.comments.splice(removeIndex, 1);
    await post.save();

   res.json(post.comments);
   } catch (error) {
   console.error(error.message);
   res.status(500).send("Server Error");
  }
   };

TECHSTACK:mongodb、express、reactjs、nodejs

试试这个,我更改了removeIndex语句

const removeComment = async (req, res) => {
try {
const post = await Post.findById(req.params.post_id);

//Pull out comment
const comment = post.comments.find(
comment => comment.id === req.params.comment_id
);
//make sure comment exists
if (!comment) {
 res.status(404).json({ error: "Comment does not exist" });
 }

//check admin
 if (comment.user.toString() !== req.admin.id) {
 return res.status(401).json({ msg: "User not authorized" });
 }

//Get remove index
const removeIndex = post.comments.indexOf(comment);

post.comments.splice(removeIndex, 1);
await post.save();

res.json(post.comments);
} catch (error) {
console.error(error.message);
res.status(500).send("Server Error");
}
};
const removeComment = async (req, res) => {
try {
const post = await Post.findById(req.params.post_id);

//Pull out comment
const comment = post.comments.find(
comment => comment.id === req.params.comment_id
);
//make sure comment exists
if (!comment) {
 res.status(404).json({ error: "Comment does not exist" });
 }

//check admin
 if (comment.user.toString() !== req.admin.id) {
 return res.status(401).json({ msg: "User not authorized" });
 }

//Get remove index
const removeIndex = post.comments.indexOf(comment);

post.comments.splice(removeIndex, 1);
await post.save();

res.json(post.comments);
} catch (error) {
console.error(error.message);
res.status(500).send("Server Error");
}
};