React-Bootstrap Dropdownbutton неправильно отображает - PullRequest
Новая
       12

React-Bootstrap Dropdownbutton неправильно отображает

0 голосов
/ 26 сентября 2018

У меня есть компонент реагирования следующим образом 

export class Foo extends Component {
  constructor(props) {
     super(props);
     this.getItems = this.getItems.bind(this);
     this.state = {
       items : []
     }
  }

  getItems() {
    // axios logic which  sets state.items to array [ "item1", "item2", "item3" ]
     axios.get('...backend', { headers: API_HEADERS })
    .then(response => {
        const items = response.data.Items
        this.setState({items});
    }).catch((error) => {
        console.log(error);
    });
  }
  componentDidMount() {
     this.getItems();
  }
  createDropdown() {
    return (
    <DropdownButton
    bsStyle='primary'
    title='Items'
    onSelect={this.handleSelect.bind(this)}
    >
    {this.state.items.map((item, index) => {
         <MenuItem key={index} value={item} eventKey={index}>{item}</MenuItem>
     })}
    </DropdownButton>
    )
  }
  render() {
    const items = this.createDropdown();
    return (
      ... Grid's, columns and the likes
      {items}
    )
  }
}

При рендеринге страницы рэп-буст-реактив DropdownButton выглядит следующим образом Реакт-бустер DropdropButton

I'mинтересно, что я здесь делаю не так.Почему Dropdown не создает MenuItem в соответствии с длиной массива?

Я не знаю, что я что-то упустил.Заранее спасибо

1 Ответ

0 голосов
/ 26 сентября 2018

Вы не возвращаете MenuItem на своей карте.Обновите ваш код, чтобы вернуть MenuItem. 

{this.state.items.map((item, index) => {
         return <MenuItem key={index} value={item} eventKey={index}>{item}</MenuItem>
     })}

ИЛИ 

{this.state.items.map((item, index) => (
    <MenuItem key={index} value={item} eventKey={index}>{item}</MenuItem>)
)}
...