javascript - React Router 是否导致我的组件渲染两次？

Question

背景

我有一个项目列表。如果您单击某个项目下的详细信息链接，您将进入其页面，您可以在其中阅读并添加有关该特定项目的评论。目前，评论组件正在 index page 上呈现。并在item details page上。它应该只在后者上渲染。

你能帮我找出原因吗？

疑难解答

我检查了我的路线以及我的评论和评论组件，但没有看到任何明显的错误。我看到this post关于渲染组件两次，但我的情况有所不同，因为我必须使用 render= 来传递 props。

我承认，我从未尝试过建立这样的路线，所以也许我没有正确地接近它。问题是下面列表中倒数第二个。

路线

  render(){
    return(
      <div>
        <Switch>
          <Route exact path='/' render={(routerProps) => <Programs {...routerProps} programs={this.props.programs}/>} /> />
          <Route exact path='/programs' render={(routerProps) => <Programs {...routerProps} programs={this.props.programs} />} />
          <Route path='/programs/new' render={(routerProps) => <ProgramInput {...routerProps}/>}/>
          <Route path='/programs/:id' render={(routerProps) => <Program {...routerProps} programs={this.props.programs}/>}/>
          <Route exact path='/programs/:id/comments' render={(routerProps) => <Program {...routerProps} program={this.props.program}/>}/>
          <Route exact path='/watchlist' render={(routerProps) => <Program {...routerProps} programs={this.props.programs} />} />
        </Switch>
      </div>
    )
  }

评论容器

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

export default CommentsContainer

程序(呈现 CommentsContainer 的位置)

I took out some of the Card code for brevity. There is More link inside the card that takes you to the item page. That part works fine.

return(
        <Fragment>
          <Grid.Column>
            <Card as='div'>
             </Card>
          </Grid.Column>

          <CommentsContainer program={program}/>

        </Fragment>
      )
    }

评论

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

评论卡我认为问题不在于这里，但是here's a link如果您需要查看该文件。

后端

我正在使用 Rails API 作为我的后端。 Here is a link to my comments_controller if you want to take a peek.

感谢您的时间和建议!

Answer 1

如果您只想在有评论时显示 CommentsContainer，则只需将其呈现的行替换为:

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