React/Redux无状态组件动态填充Select报错：函数不可作为React子元素

嘿，我帮你捋捋这个问题～你遇到的Functions are not valid as a React child错误，跟map()本身没关系，问题出在这段代码里：

{ teams ? (teams => teams.map(team => <FillSelect team={team} />)) : null }

你在这里返回了一个匿名函数teams => teams.map(...)，而不是执行这个函数得到的<option>列表。React没法渲染函数，所以就报错啦。

另外还有个小细节：你的Teams数据是对象结构（不是数组），而map()是数组专属方法，直接用在对象上会报错，得先把对象转成数组才行。

正确的实现方式 #

修改后的代码如下：

const FillSelect = ({team}) => <option value={team.onboardingOrder}>{team.name}</option>

const TeamSelector = ({teams}) => {
  return (
    <select>
      <option value="">All</option>
      { 
        teams 
          ? Object.values(teams).map(team => (
              <FillSelect key={team.id} team={team} />
            )) 
          : null 
      }
    </select>
  )
}

关键修改点说明 #

• 把对象转成数组：用Object.values(teams)提取对象里的所有team值，转换成数组，这样就能正常使用map()了
• 去掉多余的匿名函数：直接执行map()并返回生成的<option>元素列表，而不是返回一个函数
• 添加key属性：React列表渲染必须给每个子元素加唯一的key，这里用team.id是最合适的选择，能避免React的警告

如果之后需要用到对象里的键（比如示例中的0、1），也可以用Object.entries(teams)，它会返回[键, 值]的数组，写法大概是：

Object.entries(teams).map(([key, team]) => (
  <FillSelect key={team.id} team={team} />
))

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