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");
}
};