асинхронные данные в дочернем компоненте Reaction-Redux

Question

Я только начал использовать response / redux и столкнулся с проблемой асинхронной обработки данных, здесь у меня есть родительский компонент (приложение), в который я вызываю создателя действия для получения данных, а затем передаю их дочернему компоненту (VideoList).)

    `class App extends React.Component {
       componentDidMount() {
           this.onFormSubmit()
       }

       state = { selectedVideo: null }

       onVideoClick = (video) => {
           this.setState({selectedVideo: video});
       };

       onFormSubmit = (term) => {
           this.props.fetchList(term)
       }
       render() {
           return (
               <div>
                   <Header/>
                   <div  className="container">
                       <VideoDetail video={this.state.selectedVideo}/>
                       <VideoList videos={this.props.videos}/>
                   </div>
               </div>
           )
       } }

   const mapStateToProps = state => {
       return {videos: state.videos} }

   export default connect(mapStateToProps,{fetchList})(App)

    `

сейчас в дочернем компоненте я пытаюсь отобразить массив видео, но он постоянно говорит мне, что карта не является функцией, я знаю, что это потому, что данные еще не пришли из API YouTube таккак я могу решить эту проблему?

примечание: приложение было совершенно функциональным, прежде чем пытаться настроить 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>
        )
    }
}

Answer 1

Это, вероятно, потому что videos от редуктора не является массивом, вам просто нужно установить его начальное состояние на [].Я бы прокомментировал это, но все еще не могу.

Answer 2

Установите ваши видео в вашем редукторе как пустой массив.Тогда попробуйте это:

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>
        )
    }
}

Answer 3

Как вы упомянули, вы получаете эту ошибку, потому что вы пытаетесь отобразить список, который не содержит никаких данных.Вы можете написать дополнительную логику, которая говорит: «Выполнять, только если список содержит данные».

renderList() {
    if(this.props.videos){
       this.props.videos.map(video => {
          return <VideoItem video={video} onVideoClick={this.onVideoClick} key={video.id.videoId}/>
       });

    }
};