首页 > 解决方案 > TypeError:this.props.recipes.map 不是函数

问题描述

目前在第一次渲染空数组时遇到了一些麻烦,我认为它是第一次运行并且数组为空时的麻烦;无论如何是有条件地运行此渲染还是您可能知道的解决方法?

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

import List, { ListItem, ListItemText } from 'material-ui/List';

class RecipesList extends Component {
    render() {

    console.log(this.props.recipes)
        return(
            <div>
               <List component="nav">
                    {
                        this.props.recipes.recipes.map(recipe => {
                            return(
                                <ListItem button key={recipe.id}>
                                   <ListItemText>
                                        {recipe.title}
                                    </ListItemText >
                                </ListItem>
                            )
                        })
                    }
                </List>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return state;
}

export default connect(mapStateToProps)(RecipesList)

recipes 数组已经在 reducer 上初始化为:

const defaultState = {
    recipes: []
};

标签: reactjsredux

解决方案


推荐阅读