在反应 select 选项中使用枚举

Question

我有这个枚举：

const SPORTS = {
    FOOTBALL: 0,
    GOLF: 1,
    TENNIS: 2
};

我正在尝试使用 lodash 的 forIn

在反应 select 下拉列表中使用这些值

<select onChange={(event) => this.update(event, sport.id)}>
  {_.forIn(SPORTS, (key, value) => {
    {
      <option value={key}>{value}</option>;
    }
  })}
</select>;

但是出现错误：

Invariant Violation: Objects are not valid as a React child

编辑：

更改为 _.map 有效，但现在发现另一个问题。

在我手动添加所有选项之前效果很好：

<option value={0}>FOOTBALL</option>;
<option value={1}>GOLF</option>;
<option value={2}>TENNIS</option>;

现在使用地图时出现此错误：

Each child in an array or iterator should have a unique "key" prop

现在，当我的 select 框呈现时，它们是空的，但我不确定为什么。

Answer 1

_.forIn()函数returns迭代对象，使用_.map()代替：

<select onChange={(event) => this.update(event, sport.id)}>
  {_.map(SPORTS, (value, key) => (
    <option value={key} key={key}>{value}</option>;
  ))}
</select>;

在反应 select 选项中使用枚举

Use enum in react select option

lodash

reactjs