Сбой bootstrap-select при циклическом переборе объектов для параметра выбора - PullRequest
Новая
       13

Сбой bootstrap-select при циклическом переборе объектов для параметра выбора

0 голосов
/ 30 октября 2018

У меня нижеприведенный 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. Я хочу создать поле выбора, используя вышеуказанный объект. Я не знаю, почему это не работает в форме. У меня есть подобное поле выбора с похожим 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?

1 Ответ

0 голосов
/ 30 октября 2018

Используйте Object.prototype.keys вместо Object.prototype.entries для перебора свойств. Также не забудьте добавить key prop в каждую опцию, чтобы React знал, что нужно изменить: 

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