TypeError 的原因：无法读取未定义的属性
我正在尝试从 API 中获取一些数据。当我将结果记录到控制台（如
console.log(liveInfo.tracks)
）时，以下代码“有效”，但当我尝试执行
console.log(liveInfo.tracks.current)
时，它会失败并显示以下错误：
TypeError：无法读取未定义的属性（读取“current”）
。
liveInfo.tracks.current
不是人们通常访问键值对的方式吗？
componentDidMount() {
fetch('https://kchungradio.airtime.pro/api/live-info-v2')
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
liveInfo: result
})
}
)
}
json 看起来或多或少像这样：
{
"station": {
"env": "production",
},
"tracks": {
"previous": {
"name": "a",
"metadata": {
"id": 1,
},
},
"current": {
"name": "b",
"metadata": {
"id": 2,
}
}
}
}
因为在某个时刻
liveInfo.tracks
是
undefined
虽然缺乏提示，但从生命周期获取数据时的一个常见错误是尝试在 setData 发生之前通过状态检索值。
在使用
liveInfo
之前，请确保数据获取已完成
像这样
class SomeComponent = {
render() {
if(!this.state.liveInfo?.tracks?.current) return null
....
}
}
看起来您正在尝试在
componentDidMount
上填充
current
之前访问它，这意味着在执行提取之前。我建议您像这样初始化状态：
state = {
isLoaded: false,
liveInfo: {
tracks: {
curent: {}
}
}
};
因此，您将能够访问
tracks
内的
current
属性，而不会遇到
TypeError
。我制作了一个 codesandbox，因此您可以在那里查看
示例
。
如果这不能解决您的问题，请告诉我 ;)
您的调用看起来正确，
获取值的另一种方法是
console.log(liveInfo.tracks["current"]);
但我认为您的 tracks 在运行时没有值。也许您可以向我们展示更多调用 console.log 的代码。
也许您在语句中运行了两次，第一次它是未定义的并抛出错误。因此添加一个空检查，如下所示
console.log(liveInfo?.tracks?.current);