文章/答案/技术大牛

发布

社区首页 >问答首页 >循环通过Object for Select选项时，bootstrap-select失败

问循环通过Object for Select选项时，bootstrap-select失败
EN

Stack Overflow用户

提问于 2018-10-30 08:08:10

回答 1查看 155关注 0票数 0

我有下面的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？

reactjs

express

bootstrap-modal

bootstrap-select

回答 1

Stack Overflow用户

发布于 2018-10-30 08:53:33

使用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>
  )
);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53055606

复制

相似问题

问循环通过Object for Select选项时，bootstrap-select失败
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问循环通过Object for Select选项时，bootstrap-select失败EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问循环通过Object for Select选项时，bootstrap-select失败
EN