React Router 是否会导致我的组件渲染两次？答案

【问题标题】：Is React Router causing my component to render twice?React Router 是否会导致我的组件渲染两次？
【发布时间】：2019-08-31 20:09:05
【问题描述】：

背景

我有一个物品清单。如果您单击某个项目下的详细信息链接，您将被带到其页面，您可以在该页面上阅读和添加有关该特定项目的 cmets。目前，cmets 组件同时在index page 和item details page 上呈现。它应该只在后者上渲染。

你能帮我找出原因吗？

疑难解答

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

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

路线

  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.

感谢您的宝贵时间和建议！

【问题讨论】：

我在 repo 中没有看到你的路线？？
@MattOestreich 与我上面列出的第一个代码块不同的路线？
你能提供一个包含上述路由的js文件的链接吗？
@MattOestreich 哈哈！没错here。
...这发生在哪些路线上？我不知道哪些页面是您的索引页面和项目详细信息页面。请告诉我发生这种情况的确切路线。

标签： javascript reactjs react-redux react-router

【解决方案1】：

如果您只想在有 cmets 时显示 CommentsContainer，您只需将其呈现的行替换为：

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

【讨论】：

【解决方案2】：

正如 Matt Oestreich 之前指出的，您总是在渲染 Program 组件时渲染 cmets。 Programs（复数）组件基本上是一个由 Program 组件组成的列表。因此，当您渲染 Programs 组件时，您始终会使用 Comment 组件渲染 CommentsContainer。

所以也许您可以制作另一个组件，即包含 CommentsContainer 的 ProgramDetails 组件。在程序组件中，您可以链接到 ProgramDetails 组件。我认为这会阻止在 Programs（复数）中渲染的 cmets 被渲染。

【讨论】：

【解决方案3】：

这确实是一个路线问题。我的 /programs 和 / 路由都显示了我的 CommentsContainer，因为我需要添加一个三元组来基本上过滤掉这些路由。

我在我的 Card 组件之后的 Programs（复数）组件中添加了这段代码。它使用props.match 来检查正在渲染的路线是否不是/programs 和不是/。当该语句评估为 true 时，CommentsContainer 和关联的 cmets 将呈现在 /programs/:id 上。如果这些语句中的任何一个评估为 true，则它不会呈现任何内容。

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

由于我只在我的 Programs.js 文件中传递了 routerProps，因此我必须将 props.match 从 Programs 传递到我的 Program 组件（它会呈现卡片和 CommentContainer）。这样做可以让上面的三元组起作用。

{props.programs && props.programs.map((program) => <Program key={program.name} program={program} match={props.match}/>)}

【讨论】：