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

Question

请告诉我这里的问题是什么，我在restapi上获取数据，在mapStateToProps中我过滤输入字段中的数据，一切都很好console.log(cardList)显示它应该显示的内容，但如何添加此 map - cardList.cards.map 显示数据，应用程序崩溃。如果我删除此 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

由于您是从异步函数接收数据，因此您需要利用条件仅在接收到数据后才进行渲染。在履行 promise 之前，您在初始渲染上不会有任何数据，因此您的程序崩溃。

有几种方法可以做到这一点，您可以在此处阅读更多相关信息 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>
            )
        }
    }