javascript - React/Redux URL 不匹配 : When the array item number differs from the object id

Question

背景

我正在为一门类(class)做一个期末项目。我不断学习很多东西，但对 React/Redux 仍然很陌生。

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

我已经删除了数据库(Rails API)中的一些项目，因此数组中的索引号与项目的实际 ID 不同。 Here is an image to show an example of the discrepancy.

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

我已完成的故障排除

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

我确信问题出在我如何访问每个对象中的键，我只是不知道如何修复它。

此段落是应要求添加的。 Here is an image显示 this.props.program 的 console.log 值, 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>
          )

非常感谢您的宝贵时间和任何建议!

Answer 1

问题是您尝试访问 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>
      )

您仅在本地有程序，并且不会将其添加到您的 Prop 中。