Succeeded in fetching data, but it gives TypeError: Cannot read property '0' of null

Question

我今天还有一个问题。

ComponentDidMount 似乎工作正常（它从服务器获取数据），但是当我尝试使用我收到的数据时，它会抛出 TypeError: Cannot read 属性 '0 ' 为 null.

我想做的是播放我从服务器获取数据时收到的视频之一。我收到我的数据作为嵌套对象数组，这就是使用 [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 和 undefined 数据集。为此，您可以在数组中添加对空值和未定义值的检查。

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

在渲染中添加这个

Succeeded in fetching data, but it gives TypeError: Cannot read property '0' of null

Succeeded in fetching data, but it gives TypeError: Cannot read property '0' of null

javascript

iframe

setstate

reactjs