Javascript 如何从fetch REACT.js显示映射函数

这是我第一次使用这个网站，所以请容忍我。。。 我正在尝试使用youtube api显示播放列表中10个youtube视频的数组。到目前为止，我能够从api中对json数据进行console.log。尽管当我尝试在react应用程序中使用map函数内部显示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

import React，{Component}来自“React”；
导入“/Videos.css”；
从“../Pages/VideosPage/VideosSearch”导入VideosCP
从“../../api/youtubeSearchApi”导入youtubeSearch；
从“./Pages/VideosPage/VideoList”导入视频列表；
const YOUTUBE\u播放列表\u项目\u API=https://www.googleapis.com/youtube/v3/playlistItems';
让url=`${YOUTUBE\u PLAYLIST\u ITEMS\u API}？part=snippet&playlid=myplaylid&maxResults=10&key=myYoutubekey`
函数Demo（）{
}
类视频扩展组件{
状态={
videoMetaInfo:[]，
selectedVideoId:空
}
onVideoSelected=videoId=>{
这是我的国家({
selectedVideoId:videoId
})
}
onSearch=async关键字=>{
const response=wait youtubeSearch.get（“/search”{
参数：{
q：关键词
}
})
console.log（this.state）；
这是我的国家({
videoMetaInfo:response.data.items，
selectedVideoId:'Nl3DoewG3Co'
})
}
playlrender=async（）=>{
常量数据=等待获取（url）；
让提交=等待data.json（）；
console.log（'数据'，提交）
}
render（）{
常量数据=（{Data}）=>{
data=this.playlingrender（）
const results=data.items.map（（item）=>{
const{id，snippet={}=item
const title=代码段
返回(

{title}

)
});
返回结果
}
返回(


);
}
}
导出默认视频

该代码在终端中编译良好，但一旦进入浏览器，就会抛出错误：“无法读取未定义的属性‘map’”

因此，该错误是由以下行引起的：

data.items.map（（item）=>{

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

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

---

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

您从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

类视频扩展组件{
状态={
videoMetaInfo:[]，
selectedVideoId:null，
提交：[]
}
onVideoSelected=videoId=>{
这是我的国家({
selectedVideoId:videoId
})
}
onSearch=async关键字=>{
const response=wait youtubeSearch.get（“/search”{
参数：{
q：关键词
}
})
console.log（this.state）；
这是我的国家({
videoMetaInfo:response.data.items，
selectedVideoId:'Nl3DoewG3Co'
})
}
playlrender=async（）=>{
常量数据=等待获取（url）；
让提交=等待data.json（）；
this.setState（{commits}）；
}
componentDidMount（）{
这个.render（）；
}
render（）{
返回(

{this.state.commits.map（（项）=>{
const{id，snippet={}=item
const title=代码段
返回(

{title}

)
})}

);
}
}
导出默认视频

+1，您可以删除

数据

组件中的

解构

，没有任何内容作为

道具传递

，或者如果有任何内容将被传递

this.playlrender（）

会覆盖它，它会返回一个

承诺

。因此我相信您可以从

渲染

中删除整个

数据

组件，因为您的示例中没有

实现。在这里，我尝试了您的修复，但结果只是“TypeError:this.state.commits.map不是函数”…谢谢你，我假设从API调用返回的是一个数组，但如果不是数组，你必须找出如何将其转换为所需的格式。因此它可能需要是
{commits:commits.items}
或
{commits:commits.data.items}
Ah-ha，我们快到了！所以几乎可以肯定它是
commits.items
。现在它在抱怨，因为
title
不是一个字符串，它似乎是一个对象。所以您可能想将
const title=snippet
更改为
const{title}=snippet
因为
snippet
似乎有很多不同的属性。有很多事情我不明白：你的“playlingrender”方法不返回任何数据，但你尝试在render（）方法中为数据组件分配数据变量。为什么要为数据组件定义数据参数。大多数我