反应/Redux URL 不匹配:当数组项编号与对象 ID 不同时

Question

Background

我正在为一门课程做一个最终项目。我边走边学，但对 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>,或<Card.Description>的值.

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

本段应要求添加。下图显示了控制台.logthis.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>
)

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

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>
)

您只能在本地编程，并且不会将其添加到您的道具中。