Question

我正在使用bootstrap-select，ReactJS和Rudux。当我按如下方式手动创建选择时，它可以工作：

<select className="selectpicker">
  <option>Select a sport</option>
  <option>Baseball</option>
  <option>Football</option>
</select>

当我创建一个选择字段时，使用一个对象来填充选项，它可以工作：

<select>
  <option>Select a Sport</option>
  {Object.keys(this.props.sports).map((sport) => {
    return <option key={sport}>{sport}</option>
  })}
</select>

但是当我尝试将两者结合时，它无法呈现任何选项，排除＆＃34;选择运动＆＃34;：

<select className="selectpicker">
  <option>Select a Sport</option>
  {Object.keys(this.props.sports).map((sport) => {
    return <option key={sport}>{sport}</option>
  })}
</select>

this.props.sports是从远程来源获取的prop，因此数据可能需要几秒钟才能返回，我认为这会导致问题。我在componentWillMount中有以下内容，它返回this.props.sports（来自redux）。

componentWillMount(){
  this.props.fetchSports();
}

我相信是这种情况，因为当我定义一个对象returnedSports时，对于将在this.props.sports中返回的内容，并使用它来循环，选择选项会呈现。

<select className="selectpicker">
  <option>Select a Sport</option>
  {Object.keys(returnedSports).map((sport) => {
    return <option key={sport}>{sport}</option>
  })}
</select>

我需要在渲染中修改什么才能同时使用bootstrap-select和ReactJS？

循环选择选项的对象失败，并带有bootstrap-select

0 个答案: