只能获取最旧帖子的答案ID，而不是点击的帖子

Question

我正在使用firebase创建问题集合和答案子集合。我已经能够使用react成功地渲染集合和子集合。当我试图从firebase中获取帖子的ID以引用它，这样用户就可以编辑或删除答案时，就会出现这个问题。出于某种原因，它总是抓取最旧帖子的ID。

以下是一些功能代码，以便提供更好的图片：

function Post({
answers,
questionId,
question,
timestamp,
buildFaastUser,
category,
}) 
{
const user = useSelector(selectUser);
const [openModal, setOpenModal] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
const [answer, setAnswer] = useState("");
const isMenuOpen = Boolean(anchorEl);
const handleAnswer = (e) => {
e.preventDefault();
if (user) {
db.collection("questions")
.doc(questionId)
.collection("answer")
.add({
questionId: questionId,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
answer: answer,
user: {
displayName: user.displayName,
email: user.email,
uid: user.uid,
},
});
}
setOpenModal(false);
};
const handleDeletePost = (answerId) => {
console.log("id", answerId);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
const handleAnswerMenuOpen = (event) => {
setAnchorEl(event.currentTarget);
};

const answerMenuId = "primary-answer-account-menu";
const answerRenderMenu = (answerId) => (
<Menu
anchorEl={anchorEl}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
id={answerMenuId}
keepMounted
transformOrigin={{ vertical: "top", horizontal: "right" }}
open={isMenuOpen}
onClose={handleMenuClose}
>
<MenuItem onClick={handleMenuClose}>Edit</MenuItem>
<MenuItem
onClick={handleMenuClose}
onClick={() => handleDeletePost(answerId)}
>
{console.log(answerId)}
Delete
</MenuItem>
</Menu>
);

以下是实现它的JSX代码：

return (
<div className="post">
<div className="post__info">
<Avatar src={buildFaastUser ? buildFaastUser.photo : Avatar} />
<h5>
{buildFaastUser.displayName
? buildFaastUser.displayName
: buildFaastUser.email}
</h5>
<small>{new Date(timestamp?.toDate()).toLocaleString()}</small>
<small>{category}</small>
</div>
<div className="post__body">
<div className="post__question">
<p>{question}</p>
<Modal...
</div>
<div className="post__answer">
{answers.map(
({ answer, answerId, questionId: qId, timestamp, user }) => (
<p
key={answerId}
style={{ position: "relative", paddingBottom: "20px" }}
>
{questionId === qId ? (
<span>
<span
style={{
marginTop: "20px",
color: "black",
fontSize: "medium",
fontWeight: "bold",
display: "flex",
textDecorationLine: "underline",
paddingBottom: "10px",
}}
>
{user.displayName ? user.displayName : user.email}{" "}
answered on{" "}
{new Date(timestamp?.toDate()).toLocaleString()}
<br />
<div className="post__answerMenu">
<IconButton
edge="end"
aria-label="post options"
aria-controls={answerMenuId}
aria-haspopup="true"
onClick={handleAnswerMenuOpen}
color="inherit"
>
<MoreVertIcon />
</IconButton>
{answerRenderMenu(answerId)}
</div>
</span>
{parse(answer)}
<br />
<span
style={{
position: "absolute",
color: "gray",
fontSize: "small",
display: "flex",
right: "0px",
}}
></span>
</span>
) : (
""
)}
</p>
)
)}
</div>
</div>
<div className="post__questionAnswer">
<Button onClick={() => setOpenModal(true)} className="post__btnAnswer">
Answer
</Button>
</div>
</div>
);
}

我怀疑问题在于如何引用answerId，但我可能错了。

Answer 1

这里的问题是firebase中答案数据库的最后一个文档id在循环时被抓取。

因此，这里的解决方案是为帖子中的每个答案创建一个组件。

return (
<div className="post__answer">
{answers.map(
({ answer, answerId, questionId: qId, timestamp, user }) => (
<AnswerItem
answer={answer}
answerId={answerId}
answerQuestionId={qId}
questionId={questionId}
timestamp={timestamp}
user={user}
/>
)
)}
</div>
);

这解决了问题。