Question

我的反应成分如下

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

渲染页面时，react-boostrap DropdownButton看起来如下 DropdropButton react-boostrap

我想知道我在这里做错了什么。为什么下拉列表没有根据数组的长度创建MenuItem？

我不知道我是否想念一些东西。预先感谢

Answer 1

您没有在地图中返回MenuItem。更新代码以返回MenuItem。

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

OR

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

React-Bootstrap Dropdownbutton无法正确呈现

1 个答案: