Select 和 React.JS - 动态填充的选项

Question

我正在尝试在 React/Redux 应用程序的 [无状态组件] 中填充 select 为：

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

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

团队看起来像：{0:{id: 1, name: "Program Management", onboardingOrder: 0, …}, 1: {id: 2, name: "Value Capture", onboardingOrder: 1, …}…}。

它returns一个错误：Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in select ...

发生这种情况是因为我正在使用 map() 吗？正确的做法是什么？

Answer 1

您没有直接调用地图；如果 teams 为真，则您 return 一个函数 (teams => ...)。您可能希望该行看起来像这样：

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

这将产生一个 <FillSelect /> 的数组。

Answer 2

这很好用：

  return (
    <select>
      <option value="">All</option>
      {
        Object.values(teams).map((team, i) => <option value={team.onboardingOrder} key={i}>{team.name}</option> )
      }
    </select>
  )

Select 和 React.JS - 动态填充的选项

Select with React.JS - dynamically populated options

javascript

reactjs

immutable.js

redux