成功获取数据，但它给出类型错误：无法读取 null 的属性"0"

Question

我今天又遇到了一个问题。

ComponentDidMount似乎工作得很好(它从服务器带来数据)，但当我尝试使用我收到的数据时，它会抛出TypeError:无法读取null的属性'0'.

我要做的是播放我从服务器获取数据收到的视频之一。我接收的数据是一个嵌套对象的数组，这就是使用[0]来获取数组元素的特定索引的原因，但它会给出一个错误。

这是我的部分功能，

class Favorites extends React.Component {
constructor(props) {
super(props);
this.state = {
favVideos: null,
};
}
componentDidMount() {
axios.get("https://test/favorites",
{ withCredentials: true })
.then((res) => {
console.log("fav componentdidmount data.userFav[0]>>", res.data.userFavorites[0])
this.setState({
favVideos: res.data.userFavorites
})
})
}
render() {
return (
<div id="fav-list-container">
<div id="fav-list-body">
<div id="fav-list-title">Favorites</div>
<span id="favorites-select-all"></span>
</div>
<div>
<li>videotest
<div className="fav-video-thumbnail">
<iframe
src={`${this.state.favVideos[0].contentlink}`}
frameBorder="0"
allow="autoplay; encrypted-media"
title={`${this.state.favVideos[0].contentname}`}
/>
</div>
<div>
<span>{this.state.favVideos[0].contentname}</span>
</div>
</li>

</div>
</div>
)
}
}

我也试过我的iframe如下

<iframe
src={this.state.favVideos[0].contentlink}
frameBorder="0"
allow="autoplay; encrypted-media"
title={this.state.favVideos[0].contentname}
/>

如果我的问题让你感到困惑，我很抱歉，如果有任何困惑我需要澄清，请让我知道。提前谢谢你。

Answer 1

从后端服务器获取数据是异步的。这就是为什么您需要处理第一个渲染部分以及后端null和未定义数据集的原因。为此，您可以在数组中添加空值和未定义值的检查。

((this.state.favVideos && this.state.favVideos[0]) || {}).contentLink

添加到渲染