Javascript 当我尝试在React中映射和渲染数据时，应用程序崩溃

请告诉我这里的问题是什么，我在restapi上获取数据，在mapStateToProps中，我将输入的数据过滤到字段中，一切正常console.log（cardList）显示它应该显示的内容，但如何添加此map-cardList.cards.map以显示数据，应用程序崩溃。 如果我删除此地图，数据将再次出现在应用商店中，应用程序将正常运行。 我不明白循环的存在如何不允许在存储中接收数据。请告诉我

import React，{Component}来自'React'；
从“react redux”导入{connect}
从“../../actions/SessionActions”导入{getCards，findTags}
导入“./Home.css”
从“/Sort/Sort”导入排序；
从“/Filter/Filter”导入筛选器；
类Home扩展组件{
状态={
排序选择：“”
}
componentDidMount（）{
this.props.onGetCards（）；
}
handleTableSort=（e）=>{
this.setState（{sortSelect:e.nativeEvent.target.selectedOptions[0].text}）；
}
findTag=（e）=>{
this.props.onFindTags（例如target.value）；
}
render（）{
让cardList=this.props.cards；
//if（this.state.sortSelect==='Likes'）{
//cardList=this.props.cards.sort（（a，b）=>a.likes-b.likes）；
// }
//else if（this.state.sortSelect==='Comment'）{
//cardList=this.props.cards.sort（（a，b）=>a.comments-b.comments）；
// }
控制台日志（卡片列表）；
返回(
形象
标签
喜欢
评论
{
cardList.cards.map（（卡片）=>
{
card.tags.split（'，'）.map（（tag）=>
{tag}
)
}
{card.likes}
{card.comments}
)
}
)
}
}
常量mapStateToProps=（状态）=>({
卡片：state.cards.filter（cards=>cards.tags.includes（state.filterCards）），
});
const mapDispatchToProps=调度=>({
onGetCards:（）=>{
调度（getCards（））
},
onFindTags：（名称）=>{
调度（findTags（名称））
}
});
导出默认连接（mapStateToProps、mapDispatchToProps）（主页）；
//滤板
从“../actions/SessionActions.js”导入{FIND_TAGS}
常量initialState=''；
导出默认函数filterCards（状态=初始状态，操作）{
开关（动作类型）{
案例查找标签：
返回动作.有效载荷
违约：
返回状态
}
}

由于您正在从异步函数接收数据，因此需要利用条件仅在接收到数据后进行渲染。在承诺实现之前，您不会在初始渲染中有任何数据，因此您的程序会崩溃

有几种方法可以做到这一点，你可以在这里阅读更多关于这一点的内容。对于您的情况，我首选的方法是使用

cardList.length&

我在下面更新了您的代码以使用此逻辑

    render(){
        let cardList = this.props.cards;

        return(
            <div className={'card-list'}>
                <div className={'card-list__controls'}>
                    <Filter findTag={this.findTag.bind(this)}/>
                    <Sort handleTableSort={this.handleTableSort.bind(this)}/>
                </div>
                <div className={'card-list__head'}>
                    <div className={'card-list__head_row'}>Image</div>
                    <div className={'card-list__head_row'}>Tags</div>
                    <div className={'card-list__head_row'}>Likes</div>
                    <div className={'card-list__head_row'}>Comments</div>
                </div>
                {
                    cardList.length && cardList.cards.map((card) =>
                        <div className={'card-list__item'}>
                            <div className={'card-list__item_row card-list__item--img'}>
                                <img src={card.webformatURL} alt=""/>
                            </div>
                            <div className={'card-list__item_row card-list__item--tags'}>
                                <div className={'tags-wrap'}>
                                    {
                                        card.tags.split(', ').map((tag) =>
                                            <span>{tag}</span>
                                        )
                                    }
                                </div>

                            </div>
                            <div className={'card-list__item_row card-list__item--likes'}>
                                <span>{card.likes}</span>
                            </div>
                            <div className={'card-list__item_row card-list__item--comments'}>
                                <span>{card.comments}</span>
                            </div>
                        </div>
                    )
                }
                </div>
            )
        }
    }

render（）{
让cardList=this.props.cards；
返回(
形象
标签
喜欢
评论
{
cardList.length&&cardList.cards.map（（card）=>
{
card.tags.split（'，'）.map（（tag）=>
{tag}
)
}
{card.likes}
{card.comments}
)
}
)
}
}

由于您正在从异步函数接收数据，因此需要利用条件仅在接收到数据后进行渲染。在承诺实现之前，您不会在初始渲染中有任何数据，因此您的程序会崩溃

有几种方法可以做到这一点，你可以在这里阅读更多关于这一点的内容。对于您的情况，我首选的方法是使用

cardList.length&

我在下面更新了您的代码以使用此逻辑

    render(){
        let cardList = this.props.cards;

        return(
            <div className={'card-list'}>
                <div className={'card-list__controls'}>
                    <Filter findTag={this.findTag.bind(this)}/>
                    <Sort handleTableSort={this.handleTableSort.bind(this)}/>
                </div>
                <div className={'card-list__head'}>
                    <div className={'card-list__head_row'}>Image</div>
                    <div className={'card-list__head_row'}>Tags</div>
                    <div className={'card-list__head_row'}>Likes</div>
                    <div className={'card-list__head_row'}>Comments</div>
                </div>
                {
                    cardList.length && cardList.cards.map((card) =>
                        <div className={'card-list__item'}>
                            <div className={'card-list__item_row card-list__item--img'}>
                                <img src={card.webformatURL} alt=""/>
                            </div>
                            <div className={'card-list__item_row card-list__item--tags'}>
                                <div className={'tags-wrap'}>
                                    {
                                        card.tags.split(', ').map((tag) =>
                                            <span>{tag}</span>
                                        )
                                    }
                                </div>

                            </div>
                            <div className={'card-list__item_row card-list__item--likes'}>
                                <span>{card.likes}</span>
                            </div>
                            <div className={'card-list__item_row card-list__item--comments'}>
                                <span>{card.comments}</span>
                            </div>
                        </div>
                    )
                }
                </div>
            )
        }
    }

render（）{
让cardList=this.props.cards；
返回(
形象
标签
喜欢
评论
{
cardList.length&&cardList.cards.map（（card）=>