时间戳

首页 > 解决方案 > React/Redux URL 不匹配：当数组项编号与对象 id 不同时

javascript - React/Redux URL 不匹配：当数组项编号与对象 id 不同时

问题描述

背景

我正在为一门课程做一个最终项目。我在学习过程中学到了很多东西，但对 React/Redux 还是很陌生。

我有一组要渲染到页面的对象。我的主页网址是/programs。用户可以点击链接进入详细信息页面。链接是/program/<id of the program>。

我已经删除了我的数据库（Rails API）中的一些项目，因此数组中的索引号与项目的实际 ID 不同。这是显示差异示例的图像。

现在，这弄乱了/program/<id of program>显示。我单击一个项目，然后转到错误的详细信息页面。

我已完成的故障排除

为了缓解这个问题，我在我的渲染中设置了一个过滤器来找到正确的 id。您可以在下面的代码中看到它。它以let program = this.props.... 但是，现在我似乎无法访问programId并且我的卡仅部分呈现。我没有<Image>, <Card.Header>, <Card.Meta>,or的值<Card.Description>。

我确定问题在于我如何访问每个对象中的键，我只是不知道如何解决它。

本段应要求添加。 这是一张显示 ,this.props.program,this.props.programs的this.props.match.params。match.id 很好，但其他两个在组件安装之前是未定义的，因此可能会导致问题。

在此处渲染单个程序

render(){
      let program = this.props.program && this.props.programs.filter(program => program.id === this.props.match.params.id)[0]

      let programId = this.props.program && this.props.program.id

      let watchlistValue = this.props.program ? this.props.program.watchlist : null

      return(
          <Grid.Column>
            <Card as='div'>
              <Image src={program ? program.image : null} wrapped ui={false} />
              <Card.Content>
                <Card.Header>{program ? program.name: null}</Card.Header>
                <Card.Meta>
                  <span>{program ? program.network : null}</span>
                </Card.Meta>
                <Card.Description as='a' href={`/programs/${programId}`}>

                    More...

                </Card.Description>
              </Card.Content>
             </Card>
           </Grid.Column>
          )

非常感谢您的时间和您的任何建议！

标签： javascriptruby-on-railsreactjsreact-redux

解决方案

问题是您尝试访问this.props.program但未定义。你只有this.props.programs，这就是为什么过滤功能永远不会被执行。

将其更改为：

render(){
  const program = this.props.programs.find(program => program.id === this.props.match.params.id)

  const programId = program ? program.id : '';

  const watchlistValue = program ? program.watchlist : null

  return(
      <Grid.Column>
        <Card as='div'>
          <Image src={program ? program.image : null} wrapped ui={false} />
          <Card.Content>
            <Card.Header>{program ? program.name: null}</Card.Header>
            <Card.Meta>
              <span>{program ? program.network : null}</span>
            </Card.Meta>
            <Card.Description as='a' href={`/programs/${programId}`}>

                More...

            </Card.Description>
          </Card.Content>
         </Card>
       </Grid.Column>
      )

您仅在本地拥有程序，它不会添加到您的道具中。

推荐阅读