Сбой приложения при попытке отобразить и отобразить данные в React

Question

Подскажите пожалуйста, в чем здесь проблема, я получаю данные по restapi и в mapStateToProps фильтрую данные при вводе в поле и все нормально console.log (cardList) отображает, что должно, но как мне добавить эту карту- cardList.cards.map для отображения данных, приложение вылетает. Если я удалю эту карту, то снова данные будут в хранилище, и приложение будет работать правильно. Я не понимаю, как наличие цикла не позволяет получать данные в магазине. скажите пожалуйста

import React, {Component} from 'react';
import { connect } from 'react-redux'

import { getCards, findTags } from '../../actions/SessionActions'

import './Home.css'
import Sort from "./Sort/Sort";
import Filter from "./Filter/Filter";


class Home extends Component {
    state = {
        sortSelect: ''
    }

    componentDidMount() {
        this.props.onGetCards();
    }

    handleTableSort = (e) => {
        this.setState({sortSelect : e.nativeEvent.target.selectedOptions[0].text});
    }

    findTag = (e) => {
        this.props.onFindTags(e.target.value);
    }


    render(){
        let 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);
        // }


        console.log(cardList);

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

const mapStateToProps = (state) => ({
    cards: state.cards.filter(cards => cards.tags.includes(state.filterCards)),
});

const mapDispatchToProps = dispatch => ({
    onGetCards: () => {
        dispatch(getCards())
    },
    onFindTags: (name) => {
        dispatch(findTags(name))
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);



//filterCards


import { FIND_TAGS } from '../actions/SessionActions.js'

const initialState = '';

export default function filterCards(state = initialState, action) {
switch (action.type) {
    case FIND_TAGS:
        return action.payload
    default:
        return state
}
}

Answer 1

Поскольку вы получаете данные из асинхронной функции, вам необходимо использовать условное отображение, которое будет отображаться только после получения данных. У вас не будет никаких данных о начальном рендере до тех пор, пока обещание не будет выполнено, поэтому ваша программа аварийно завершает работу.

Есть несколько способов сделать это, и вы можете прочитать об этом здесь https://reactjs.org/docs/conditional-rendering.html.Мой предпочтительный метод в вашем случае будет использовать 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>
            )
        }
    }