为选择选项循环对象时，引导选择失败

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"
}

我正在使用引导选择、ReactJS 和 ExpressJS。我想使用上述对象创建一个选择字段。我不知道为什么它在表单中不起作用。我有一个类似 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>
  )
);