React首次渲染空数组触发TypeError: map不是函数，求解决方案

这个问题其实是数组访问路径错误加上缺少空值检查导致的，咱们一步步来搞定：

错误原因分析 #

看你的Reducer初始化代码：

const defaultState = { recipes: [] };

而mapStateToProps直接返回了整个state，所以你的组件props结构是{ recipes: [] }——也就是this.props.recipes本身就是那个空数组。但你在渲染时写的是this.props.recipes.recipes.map，这里多嵌套了一层.recipes，导致访问到的是undefined，调用map自然就抛出了map is not a function的错误。

解决方法 #

1. 修正数组访问路径 #

把渲染代码里的this.props.recipes.recipes.map改成this.props.recipes.map，这样就能正确访问到Reducer里的recipes数组了。

2. 添加空值/类型检查（条件渲染） #

即使修正了路径，有时候异步加载数据时，recipes可能会是null或undefined，所以最好加上兜底检查，避免再次报错。这里有几种常用方式：

• 方式一：逻辑与运算符兜底
  确保数组存在后再执行map：

{ this.props.recipes && this.props.recipes.map(recipe => {
  return(
    <ListItem button key={recipe.id}>
      <ListItemText>{recipe.title}</ListItemText>
    </ListItem>
  )
}) }

• 方式二：可选链操作符（ES2020+）
  语法更简洁，自动处理空值：

{ this.props.recipes?.map(recipe => {
  return(
    <ListItem button key={recipe.id}>
      <ListItemText>{recipe.title}</ListItemText>
    </ListItem>
  )
}) }

• 方式三：解构时设置默认值
  在render开头解构props，给recipes设置空数组兜底：

const { recipes = [] } = this.props;

之后直接用recipes.map(...)即可，即使recipes为undefined也不会报错。

修正后的完整组件代码 #

import React, { Component } from 'react';
import { connect } from 'react-redux';
import List, { ListItem, ListItemText } from 'material-ui/List';

class RecipesList extends Component {
  render() {
    // 解构时设置默认值，兜底空数组
    const { recipes = [] } = this.props;
    console.log(recipes)
    return(
      <div>
        <List component="nav">
          { 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)

额外提醒 #

如果后续你的Reducer需要把recipes改成嵌套结构（比如{ recipes: { recipes: [...] } }），记得同步调整mapStateToProps，比如：

function mapStateToProps(state) {
  return { recipes: state.recipes.recipes };
}

这样组件里就能直接拿到数组，不用再嵌套访问。

内容的提问来源于stack exchange，提问作者Marcelo