在"选择选项"的"对象"中循环时，引导程序选择失败

Question

我有下面的JSON，我想遍历对象，并将其作为下拉选择列表引导中的选项：

location = {
"1": "1234 E. Big Beaver Rd. Troy WI",
"2": "7340 Shoal Blvd.,Austin CA",
"3": "58 Executive Park, Irvine CA 92456",
"4": "710 rue de la Renaissance Pittsburg"
}

我使用的是bootstrap select、ReactJS和ExpressJS。我想使用上面的对象创建一个选择字段。我不知道为什么它在表单中不起作用。我有一个类似的select字段和类似的JSON，它也起作用。

以下是我的代码：

<div className="row">
<div className="form-group col-md-4">
<label>location:</label>
<select
value={this.state.location}
onChange={this.handleChangeLocation}
style={{ fontSize: 14, width: '750px' }}
className="form-control">
{ Object.entries(this.state.location).map(elem => {
console.log('elem: ' + elem);
return ( <option value = {elem[1]}>{elem[1]}</option> );
})
}
</select>
</div>
</div>

我需要在渲染中修改什么才能同时使用bootstrap select和ReactJS？

Answer 1

使用Object.prototype.keys而不是Object.prototype.entries来迭代属性。也不要忘记在每个选项上添加key道具，这样React就会知道需要重新发送什么：

Object.keys(this.state.location)
.map(key => (
<option key={key} 
value={this.state.location[key]}>
{this.state.location[key]}
</option>
)
);