javascript - 如何从 fetch REACT.js 显示 map 函数

Question

这是我第一次使用这个网站，所以请耐心等待...... 我正在尝试使用 youtube api 从播放列表中显示 10 个 youtube 视频的数组。到目前为止，我能够通过 api console.log json 数据。尽管当我尝试使用 map 函数在我的 React 应用程序中显示 json 数据时，问题就出现了。

这是我的所有代码:

import React, { Component } from "react";
import './Videos.css';
import VideosCP from '../Pages/VideosPage/VideosSearch'
import youtubeSearch from "../../api/youtubeSearchApi";
import VideosList from "../Pages/VideosPage/VideoList";

const YOUTUBE_PLAYLIST_ITEMS_API = 'https://www.googleapis.com/youtube/v3/playlistItems';

let url = `${YOUTUBE_PLAYLIST_ITEMS_API}?part=snippet&playlistId=myPlaylistId&maxResults=10&key=myYoutubekey`

function Demo() {
    
}

class Videos extends Component{

    state = {
        videoMetaInfo:[],
        selectedVideoId: null
    }

    onVideoSelected = videoId => {
        this.setState({
            selectedVideoId:videoId
        })
    }

    onSearch = async keyword => {
        const response = await youtubeSearch.get("/search",{
            params:{
                q:keyword
            }
        })
        console.log(this.state);

        this.setState({
            videoMetaInfo: response.data.items,
            selectedVideoId: 'Nl3DoewG3Co'
        })
    }

    playlistRender = async () => {
        const data =  await fetch(url);
        let commits = await data.json();
        console.log('data', commits)

    }

    render(){

        const Data = ({data}) => {
            data = this.playlistRender()
            const results = data.items.map((item)=>{
                const {id, snippet = {}} = item
                const title = snippet
                return(
                    <li key={id}>
                        <h3>{title}</h3>
                    </li>
                )
            });
            return results
        }

        return(

            <div className="wrapper">
                <div className="wrapper-inner scroll">
                    <VideosCP onSearch={this.onSearch}/>
                    <VideosList onVideoSelected={this.onVideoSelected}
                    data={this.state.videoMetaInfo}/>
                    <ul>
                       <Data/>
                    </ul>
                </div>
            </div>
        );
    }
}

export default Videos

代码在终端中编译得很好，但一旦进入浏览器，它就会发出错误:“无法读取未定义的属性‘map’”。

因此，错误是由以下行引起的:data.items.map((item)=>{

更奇怪的是，浏览器中的控制台识别出数组中有一个“items”。为什么浏览器向我抛出此错误？不能映射项目吗？如果是这样为什么不呢？这个错误如何修复？

到目前为止，我已经尝试了所有方法，这是我得到的最接近的结果，但还没有结果。

请帮助我，堆栈溢出是我唯一的希望...

Answer 1

您从 API 加载的数据是有状态的，因此您需要在加载后将其设置为有状态。然后，一旦存在状态信息，您就可以对其进行映射。

我还添加了 componentDidMount 方法调用，以确保我们在组件安装后调用 API。

class Videos extends Component{

    state = {
        videoMetaInfo:[],
        selectedVideoId: null,
        commits: []
    }

    onVideoSelected = videoId => {
        this.setState({
            selectedVideoId:videoId
        })
    }

    onSearch = async keyword => {
        const response = await youtubeSearch.get("/search",{
            params:{
                q:keyword
            }
        })
        console.log(this.state);

        this.setState({
            videoMetaInfo: response.data.items,
            selectedVideoId: 'Nl3DoewG3Co'
        })
    }

    playlistRender = async () => {
        const data =  await fetch(url);
        let commits = await data.json();
        this.setState({ commits });
    }

    componentDidMount() {
        this.playlistRender();
    }

    render(){
        return(
            <div className="wrapper">
                <div className="wrapper-inner scroll">
                    <VideosCP onSearch={this.onSearch}/>
                    <VideosList onVideoSelected={this.onVideoSelected}
                    data={this.state.videoMetaInfo}/>
                    <ul>
                        {this.state.commits.map((item) => {
                            const {id, snippet = {}} = item
                            const title = snippet
                            return (
                                <li key={id}>
                                    <h3>{title}</h3>
                                </li>
                            )
                        })}
                    </ul>
                </div>
            </div>
        );
    }
}

export default Videos