React/Redux中ES6遍历数组报错：render无返回值及map非函数

一、修复“组件未返回任何内容”的问题 #

函数组件必须明确返回JSX元素或者null，如果你的ConnectedList组件里漏掉了return语句，或者return的位置不对，就会触发这个错误。

先看一个典型的错误写法：

const ConnectedList = ({ user }) => {
  // 这里没有包裹return，map的结果不会被返回
  user.map(item => <div key={item.id}>{item.name}</div>)
}

你可以用两种方式修复：

1. 显式return：把JSX结构用return包裹起来

const ConnectedList = ({ user }) => {
  return (
    <div className="user-list">
      {user.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

2. 隐式返回：箭头函数直接写表达式（去掉外层花括号），适合结构简单的组件

const ConnectedList = ({ user }) => (
  <div className="user-list">
    {user.map(item => <div key={item.id}>{item.name}</div>)}
  </div>
)

如果组件在某些场景下不需要渲染内容，也要返回null避免报错，比如：

const ConnectedList = ({ user }) => {
  if (!user) {
    return null;
  }
  return (
    <div className="user-list">
      {user.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

二、修复“TypeError: user.map is not a function”的问题 #

这个错误的核心是user不是数组——map是数组专属方法，如果user是undefined、null或者普通对象，调用map就会报错。常见原因和解决方法如下：

1. 检查Redux State的初始值 #

看看你的Redux reducer里，user的初始状态是不是数组。很多人会不小心把初始值设为null或undefined：

// 错误的初始值
const initialState = {
  user: null // 或者undefined
};

// 正确的初始值
const initialState = {
  user: [] // 空数组
};

2. 处理异步加载的情况 #

如果user是通过API请求获取的，在请求完成前user可能还是初始值（比如空数组或null）。这时候要先判断user的有效性再调用map：

const ConnectedList = ({ user }) => {
  // 先判断user是否存在且是数组
  if (!user || !Array.isArray(user)) {
    return <div>加载中...</div>; // 给用户一个加载提示
  }

  return (
    <div className="user-list">
      {user.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

也可以用可选链操作符简化判断（不过要注意，这种情况如果user不是数组，会渲染undefined，建议还是配合加载提示）：

const ConnectedList = ({ user }) => (
  <div className="user-list">
    {user?.map(item => <div key={item.id}>{item.name}</div>)}
  </div>
)

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