Reactjs 什么原因会导致重新渲染道具，从而导致Firebase查询返回错误的数据？

My React Firebase应用程序呈现一系列帖子，每个帖子呈现一个评论列表：

PostList 
  PostSummary
    CommentList
      Comment

PostList和CommentList分别查询Firebase中的不同集合（例如“posts”和“comments”）。对CommentList的查询应该只提取那些与父级的帖子id匹配的评论

奇怪的是，对于页面上的每一篇文章，注释只与页面上最后一篇文章的数据库相匹配。通过console.logs，我已经确定，在某一点上，每个评论列表中都存在正确的评论，但是出于某种原因，组件使用最后一个PostSummary的post id重新呈现一段时间，而不管哪个PostSummary是它们的父项

评论列表怎么可能访问不应该在其道具中的帖子

下面的组件

const PostList=（道具）=>{
const{posts}=props
返回(
{posts&&posts.map（post=>{
返回(
)
})}
)
}
常量mapStateToProps=（状态）=>{
返回{
帖子：state.firestore.ordered.posts
}
}
导出默认组合(
连接（MapStateTops），
用路由器，
firestoreConnect([
{收集：'posts'，
订购人：[“已创建于”，“描述”]，
限制：3}
])
)（完整邮件列表）

constpostsummary=（{post}）=>{
//其他代码不适用
报税表（
)
}

const CommentList=（道具）=>{
const{comments，postId}=props
返回(

{comments&&comments.map（（comment，i）=>
)
}

)
}
const mapStateToProps=（state，ownProps）=>{
返回{
注释：state.firestore.ordered.comments
}
}
导出默认组合(
连接（MapStateTops），
用路由器，
firestoreConnect（道具=>[
{集合：'注释'，
其中：['postId'，'='，props.postId]，
订购人：['created_At'，'desc']}
])
)（评论名单）
这里的问题在于
redux
。我不熟悉您使用的库，但据我所知，它在redux商店中的posts下存储每个
posts
，在redux商店中的comments下存储每个
comments
。因此，每次获取
注释的集合时，它都会保存在与之前的集合相同的位置，并覆盖它。这就是为什么你总是引用上一篇文章的评论

在那个图书馆的文档中，我找不到任何藏品的
别名

您可以重构数据库结构，将
注释
存储在类似
注释/postid
的路径下，然后像这样读取它们：

firestoreConnect（道具=>[
{collection:`comments/${props.postId}`，
订购人：['created_At'，'desc']}
])

或者使用支持
别名
集合的库，或者直接使用firebase SDK

是无redux的
提供程序
解决方案，该解决方案将支持您的数据库结构，并且可以使用
别名
这里的问题在于
redux
。我不熟悉您使用的库，但据我所知，它在redux商店中的posts下存储每个
posts
，在redux商店中的comments下存储每个
comments
。因此，每次获取
注释的集合时，它都会保存在与之前的集合相同的位置，并覆盖它。这就是为什么你总是引用上一篇文章的评论

在那个图书馆的文档中，我找不到任何藏品的
别名

您可以重构数据库结构，将
注释
存储在类似
注释/postid
的路径下，然后像这样读取它们：

firestoreConnect（道具=>[
{collection:`comments/${props.postId}`，
订购人：['created_At'，'desc']}
])

或者使用支持
别名
集合的库，或者直接使用firebase SDK

是无redux的
提供程序
解决方案，该解决方案将支持您的数据库结构，并可以使用
别名
，正如Tarik指出的，问题是同时对多个不同的注释组使用相同的redux存储变量名。最简单的解决方法似乎是动态命名每组注释-因此，不要使用
state.firestore.ordered.comments
，只需执行
state.firestore.ordered[`{ownProps.recipeId}-comments`.

完整解决方案：

const CommentList = (props) => {
  const { comments, recipeId } = props

  return (
    <ul>
      {comments && comments.map((comment,i) =>
        <Comment comment={comment} key={i} />
      )
      }
    </ul>
  )
}

const mapStateToProps = (state, ownProps) => {
  return {
    comments: state.firestore.ordered[`${ownProps.recipeId}-comments`]
  }
}

export default compose(
  connect(mapStateToProps),
  withRouter,
  firestoreConnect(props => [
    {
      collection: 'comments',
      where: ['recipeId', '==', props.recipeId],
      orderBy: ['created_At', 'desc'],
      storeAs: `${props.recipeId}-comments`
    }
  ])
)(CommentList)

const CommentList=（道具）=>{
const{comments，recipeId}=props
返回(

{comments&&comments.map（（comment，i）=>
)
}

)
}
const mapStateToProps=（state，ownProps）=>{
返回{
注释：state.firestore.ordered[`${ownProps.recipeId}-comments`]
}
}
导出默认组合(
连接（MapStateTops），
用路由器，
firestoreConnect（道具=>[
{
收集：'评论'，
其中：['recipeId'，'='，props.recipeId]，
订购人：[“已创建于”，“描述”]，
storeAs:`${props.recipeId}-注释`
}
])
)（评论名单）
正如塔里克所指出的，问题在于同时对多组不同的注释使用相同的redux存储变量名。最简单的解决方法似乎是动态命名每组注释-因此，不要使用
state.firestore.ordered.comments
，只需执行
state.firestore.ordered[`{ownProps.recipeId}-comments`.

完整解决方案：

const CommentList = (props) => {
  const { comments, recipeId } = props

  return (
    <ul>
      {comments && comments.map((comment,i) =>
        <Comment comment={comment} key={i} />
      )
      }
    </ul>
  )
}

const mapStateToProps = (state, ownProps) => {
  return {
    comments: state.firestore.ordered[`${ownProps.recipeId}-comments`]
  }
}

export default compose(
  connect(mapStateToProps),
  withRouter,
  firestoreConnect(props => [
    {
      collection: 'comments',
      where: ['recipeId', '==', props.recipeId],
      orderBy: ['created_At', 'desc'],
      storeAs: `${props.recipeId}-comments`
    }
  ])
)(CommentList)

const CommentList=（道具）=>{
const{comments，recipeId}=props
返回(

{comments&&comments.map（（comment，i）=>
)
}

)
}
const mapStateToProps=（state，ownProps）=>{
返回{
注释：state.firestore.ordered[`${ownProps.recipeId}-comments`]
}
}
导出默认组合(
连接（MapStateTops），
用路由器，
firestoreC
const CommentList = (props) => {
  const { comments, postId } = props

  return (
    <ul>
      {comments && comments.map((comment,i) =>
        <Comment comment={comment} key={i} />
      )
      }
    </ul>
  )
}

const mapStateToProps = (state, ownProps) => {
  return {
    comments: state.firestore.ordered.comments
  }
}

export default compose(
  connect(mapStateToProps),
  withRouter,
  firestoreConnect(props => [
    { collection: 'comments',
      where: ['postId', '==', props.postId],
      orderBy: ['created_At', 'desc'] }
  ])
)(CommentList)

const CommentList = (props) => {
  const { comments, recipeId } = props

  return (
    <ul>
      {comments && comments.map((comment,i) =>
        <Comment comment={comment} key={i} />
      )
      }
    </ul>
  )
}

const mapStateToProps = (state, ownProps) => {
  return {
    comments: state.firestore.ordered[`${ownProps.recipeId}-comments`]
  }
}

export default compose(
  connect(mapStateToProps),
  withRouter,
  firestoreConnect(props => [
    {
      collection: 'comments',
      where: ['recipeId', '==', props.recipeId],
      orderBy: ['created_At', 'desc'],
      storeAs: `${props.recipeId}-comments`
    }
  ])
)(CommentList)