在反应选择选项中使用枚举

Question

我有这个枚举：

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

我正在尝试使用 lodash 的 forIn 在反应选择下拉列表中使用这些值

<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

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

Answer 1

_.forIn() 函数返回迭代对象，请改用_.map()：

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