从JSON变量React设置一个新变量

Question

我正在制作一个react足球应用程序。当从固定装置列表中选择时，我的一个组件应该显示有关固定装置的更多详细信息。我通过点击导入ID来设置固定装置，然后将我的固定装置列表(我从API获得(过滤到此ID。然后我想为球队名称、体育场、日期等设置变量，以便我可以在应用程序中呈现这些变量。

我的代码如下

const gameID = useLocation()
let fixture = worldcupFixtures.filter(fixtures => fixtures._id == gameID.state._id)
let home = fixture[0].teams.home.name
let away = fixture[0].teams.away.name
let homeLogo = fixture[0].teams.home.logo
let awayLogo = fixture[0].teams.away.logo
let date = fixture[0].fixture.date.substring(0, 10)
let time = fixture[0].fixture.date.substring(11, 16)
let stadium = fixture[0].fixture.venue.name

我的fixture变量可以在前端打印出来，json看起来是这样的。然而，当我尝试渲染它们时，我的其他变量都不起作用，尽管我的应用程序编译了，但我看不到任何东西，控制台给了我这个错误->TypeError:无法读取未定义(读取"home"(的属性

有什么想法吗？谢谢

Answer 1

您检查过fixture数组中的数据吗？TypeError: Cannot read properties of undefined (reading 'home')错误意味着fixture中第一个条目的teams属性是null/undefined。在这种情况下，假设worldcupFixtures是您的数据源，在尝试读取返回的数组中的数据属性之前，可能需要验证filter()是否具有有效值。