Javascript react redux子组件中的异步数据

我刚开始使用react/redux，im在异步数据处理方面遇到了问题，这里我有一个父组件（App），我调用action creator来获取数据，然后将其传递给子组件（VideoList）

`class应用程序扩展了React.Component{
componentDidMount（）{
此文件名为.onFormSubmit（）
}
状态={selectedVideo:null}
onVideoClick=（视频）=>{
this.setState（{selectedVideo:video}）；
};
onFormSubmit=（术语）=>{
this.props.fetchList（术语）
}
render（）{
返回(
)
} }
常量mapStateToProps=状态=>{
返回{videos:state.videos}
导出默认连接（mapStateToProps，{fetchList}）（应用程序）
`

现在在子组件，我试图映射视频数组，但它一直告诉我映射不是一个函数，我知道这是因为数据还没有来自youtube api，所以我如何解决这个问题

注意：在尝试设置redux之前，该应用程序功能完善

    class VideoList extends React.Component {
    renderList() {
        this.props.videos.map(video => {
            return <VideoItem video={video} onVideoClick={this.onVideoClick} key={video.id.videoId}/>
        });
    };
    render() {
        console.log(this.props.videos);
        return (
            <div> 
                {this.renderList()}
            </div>
        )
    }
}

类视频列表扩展了React.Component{
renderList（）{
this.props.videos.map（video=>{
返回
});
};
render（）{
console.log（this.props.videos）；
返回(
{this.renderList（）}
)
}
}

如您所述，出现此错误是因为您试图映射不包含任何数据的列表。您可以编写一些额外的逻辑，说明“仅当列表包含数据时才执行”

renderList（）{
如果（这个。道具。视频）{
this.props.videos.map（video=>{
返回
});
}
}; 
这可能是因为来自reducer的
视频
不是数组，您只需将其初始状态设置为
[]
。我会对此发表评论，但我仍然不能。
将视频在reducer中设置为空数组。然后试试这个：

class VideoList extends React.Component {
    render() {
        if (this.props.videos.length === 0){
            return <div>Loading...</div>
        }
        return (
            <div> 
              {this.props.videos.map(video => {
                return <VideoItem
                         video={video}
                         onVideoClick={this.onVideoClick}
                         key={video.id.videoId}
                       />
              }}
            </div>
        )
    }
}

类视频列表扩展了React.Component{
render（）{
if（this.props.videos.length==0）{
返回加载。。。
}
返回(
{this.props.videos.map（video=>{
返回
}}
)
}
}
如果视频列表尚未加载，则不渲染
VideoList
将是一个解决方案。它已设置为[]，事实上我在错误发生之前记录了空数组控制台。因此，第一个问题是您没有返回要渲染的贴图：
返回此.props.videos.map（…）
。第二个可能的问题是函数
renderList
没有绑定，要做到这一点，只需像这样调用它：
{this.renderList.bind（this）}
.if（this.props.videos.length）实际上已删除错误，但现在当我输入搜索词时，它会导致应用程序完全刷新，并且不会呈现任何可能与您在搜索词组件中的设置有关的内容。您可以与我们共享该代码，我们可以推断出错误所在。很可能与您如何设置动作创建者有关当我在搜索框中输入时，我被打断了。非常感谢，这解决了问题，没有呈现的问题是因为我没有用（）lol包装返回语句
renderList() {
    if(this.props.videos){
       this.props.videos.map(video => {
          return <VideoItem video={video} onVideoClick={this.onVideoClick} key={video.id.videoId}/>
       });

    }
}; 

class VideoList extends React.Component {
    render() {
        if (this.props.videos.length === 0){
            return <div>Loading...</div>
        }
        return (
            <div> 
              {this.props.videos.map(video => {
                return <VideoItem
                         video={video}
                         onVideoClick={this.onVideoClick}
                         key={video.id.videoId}
                       />
              }}
            </div>
        )
    }
}