Javascript React Router是否导致我的组件渲染两次？背景_Javascript_Reactjs_React Redux_React Router

Javascript React Router是否导致我的组件渲染两次？背景

javascript reactjs

Javascript React Router是否导致我的组件渲染两次？背景,javascript,reactjs,react-redux,react-router,Javascript,Reactjs,React Redux,React Router,我有一份物品清单。如果您单击某个项目下的详细信息链接，您将进入该项目的页面，在该页面中，您可以阅读并添加有关该项目的评论。当前，comments组件正在和上呈现。它只能在后者上渲染你能帮我找出原因吗故障排除我检查了我的路线、注释和注释组件，但没有看到任何明显的错误。我两次看到了渲染组件，但我的情况不同，因为我必须使用render=来传递道具我承认，我从来没有尝试过建造这样的路线，所以也许我没有正确地接近它。一个是问题，是下面列表底部的第二个问题路线 const Comments = (

我有一份物品清单。如果您单击某个项目下的详细信息链接，您将进入该项目的页面，在该页面中，您可以阅读并添加有关该项目的评论。当前，comments组件正在和上呈现。它只能在后者上渲染

你能帮我找出原因吗

故障排除我检查了我的路线、注释和注释组件，但没有看到任何明显的错误。我两次看到了渲染组件，但我的情况不同，因为我必须使用

render=

来传递道具

我承认，我从来没有尝试过建造这样的路线，所以也许我没有正确地接近它。一个是问题，是下面列表底部的第二个问题

路线

const Comments = (props) => {
  // console.log(props.comments && props.comments.map(comment => console.log(comment))
  return(
    <Comment.Group>


      {props.comments && props.comments.map(comment => <CommentCard key={comment.id} comment={comment}/>)}


    </Comment.Group>
  )
}

export default Comments

render（）{
返回(
} /> />
} />
}/>
}/>
}/>
} />
)
}

评论容器

class CommentsContainer extends React.Component {
  render(){
    return(
      <div>
        <Comments comments={this.props.program && this.props.program.comments}/>
      </div>
    )
  }
}

export default CommentsContainer

class CommentsContainer扩展了React.Component{
render（）{
返回(
)
}
}
导出默认注释容器

程序（在其中呈现CommentsContainer）

为了简洁起见，我取出了一些卡片代码。卡片内有更多链接，可将您带到项目页面。那部分很好用。
返回(
)
}

const Comments = (props) => {
  // console.log(props.comments && props.comments.map(comment => console.log(comment))
  return(
    <Comment.Group>


      {props.comments && props.comments.map(comment => <CommentCard key={comment.id} comment={comment}/>)}


    </Comment.Group>
  )
}

export default Comments

const注释=（道具）=>{
//log（props.comments&&props.comments.map（comment=>console.log（comment））
返回(
{props.comments&&props.comments.map（comment=>）}
)
}
导出默认注释

ComentCard 我认为问题不在这里，但如果你需要查看文件

后端我正在为我的后端使用Rails API

感谢您的时间和建议！如果您只想在有注释时显示

注释容器

，您只需将其呈现的行替换为：

{program.comments && <CommentsContainer program={program}/>}

{program.comments&&}

如果您只想在有注释时显示注释容器，则只需将其呈现的行替换为：

{program.comments && <CommentsContainer program={program}/>}

{program.comments&&}

正如Matt Oestreich在前面指出的，在呈现程序组件时，您始终会呈现注释。程序（复数）组件基本上是一个由程序组件组成的列表。因此，在呈现程序组件时，您始终会呈现带有注释组件的注释容器

因此，也许您可以制作另一个组件，ProgramDetails组件，其中包括CommentsContainer。在程序组件中，您可以链接到ProgramDetails组件。我认为这将防止注释在程序中呈现（复数）是呈现的。

正如Matt Oestreich在前面指出的，在呈现程序组件时，始终呈现注释。程序（复数）组件基本上是一个由程序组件组成的列表。因此，在呈现程序组件时，始终呈现带有注释组件的注释容器

因此，也许您可以制作另一个组件，ProgramDetails组件，其中包括CommentsContainer。在程序组件中，您可以链接到ProgramDetails组件。我认为这将防止注释在程序中呈现（复数）已呈现。

这确实是一个路由问题。我的

/程序

和我的

路由都显示了我的评论容器，因为我需要添加一个三元组来过滤这些路由

我在我的程序中添加了此代码（复数）组件紧跟在我的卡片组件之后。它使用

道具.match

检查正在呈现的路由是否不是

/programs

和

。当该语句计算为true时，注释容器和相关注释在

/programs/:id

上呈现。如果其中任何一个语句计算为true，它没有呈现任何东西

{this.props.match.url !== '/programs' && this.props.match.url !== '/'? <CommentsContainer program={program}/> : null}