reactjs - 如何使用 react redux 和 firebase connect 更改帖子中的评论
问题描述
我正在尝试克隆 instagram,目前我被困在评论部分,当我尝试添加评论时,所有帖子都会添加相同的评论。我将我的评论存储在 Firestore 中,并且它被正确保存,但我无法弄清楚如何管理状态,以便只有那些帖子应该反映添加评论的更改。
这是 showcomments 组件的以下代码,它将在另一个组件中使用。谁能帮我解决这个问题。
import React from "react";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles((theme) => ({
comment: {
marginTop: "1rem",
},
postCaption: {
...theme.typography.postCaption,
},
username: {
...theme.typography.username,
},
}));
function ShowComments(props) {
const classes = useStyles();
const { comments } = props;
const renderComments = () => {
if (comments) {
return comments.map((comment) => {
return (
<h3 key={comment.id}>
{comment.username}{" "}
<span className={classes.postCaption}>{comment.comment}</span>
</h3>
);
});
}
};
return (
<div>
{console.log(props.postId)}
{renderComments()}
</div>
);
}
const mapStateToProps = (state) => {
console.log(state);
return {
comments: state.firestore.ordered.comments,
};
};
export default compose(
connect(mapStateToProps),
firestoreConnect((props) => {
return [
{
collection: "instagramPosts",
doc: props.postId,
subcollections: [{ collection: "comments" }],
storeAs: "comments",
},
];
})
)(ShowComments);
解决方案
推荐阅读
- javascript - 循环遍历 json 对象嵌套属性并在不为空时显示它们 - vue
- c# - 读取 Sharepoint Excel 数据
- javascript - 为什么在我使用 addEventListener 时加载时会发生“单击”事件?
- javascript - 如何在提交按钮单击php时提示sweetalert
- java - Swagger 记录了所有未在 Spring Boot Controller 类中映射的 HTTP 方法
- c# - 如何添加文本定时字幕以在 MediaPlayerElement 中查看?
- magento - 需要 mCrypt 扩展
- binding - 嵌入式绑定不适用于 jaxb xjc 3.0.0
- java - 需要重写或实现哪些类或方法才能仅自定义 Shiro 的身份验证逻辑?
- git - Git:拉取请求导致冲突