Javascript 映射要选择的字典数组下拉列表？

我试图将一组字典映射到一个select下拉列表，但我目前的方法只生成正确数量的select选项，没有任何值

This is what my array looks like:
dateArray = [
      {year:'2016', month: "01"},
      {year:'2017', month: "01"},
      {year:'2018', month: "02"},
      {year:'2018', month: "02"}
    ];

这就是我试图将数组映射到“选择”下拉列表的方式：

            <select className='form-control'>
              {this.state.dateArray.map((year) => <option key={year.value} value={year.value}>{year.display}</option>)}
            </select>
            <select className='form-control'>
              {this.state.dateArray.map((month) => <option key={month.value} value={month.value}>{month.display}</option>)}
            </select>

{this.state.dateArray.map（（year）=>{year.display}）
{this.state.dateArray.map（（month）=>{month.display}）

如何映射字典数组以选择下拉列表？

此代码使用循环遍历数组并选择元素。然后，它使用将选项附加到select

让dateArray=[{
年份：2016年，
月份：“01”
},
{
年份：2017年，
月份：“01”
},
{
年份：“2018年”，
月份：“02”
},
{
年份：“2018年”，
月份：“02”
}
];
让select=document.querySelectorAll（“.form控件”）[0]；
dateArray.forEach（e=>{
select.innerHTML+=`e.year}`；
});
也许像这样的方法会奏效：

<select className='form-control'>
  {this.state.dateArray.map((item, i) => {return <option key={i} value={item.year}>{item.year}</option>})}
</select>
<select className='form-control'>
  {this.state.dateArray.map((item, i) => {return <option key={i} value={item.month}>{item.month}</option>})}
</select>


{this.state.dateArray.map（（item，i）=>{return{item.year}}}
{this.state.dateArray.map（（item，i）=>{return{item.month}}}
我可以用
ejs
或
django模板
这样的工具轻松实现这一点，但我不知道如何使用reactjs！如果您认为它会有帮助，我可以向您展示，尽管我怀疑它会有帮助。您可以轻松地使用foreach循环。不过，您必须使用DOM修改文档