以下代码显示首次呈现组件时的国家列表。
<select onChange={this.handleLocation} data-live-search="true" className="selectpicker" data-selected-text-format="count" data-size="7" title="Select Country" >
{ getNames() && getNames().map(
(e, id) => {
return <option key={e} >{e}</option>
})
}
</select>
注:使用bootstrap-select
。
首次加载组件时,国家/地区列表将正确显示。但当点击按钮时,我正在使用重定向到另一个组件
this.props.push('/searchresults')
按下后,组件将完全加载,但国家/地区列表不会呈现给组件。
我的代码出了什么问题。
仅供参考:npm i国家列表-->获得国家的套餐
提前感谢
请在函数映射中删除return,并且您的标记选项属性键必须是唯一的,如果即使正确地删除函数getNames也不会对代码造成任何问题。我希望有用。
{getNames().map((e, id) => (<option key={id} >{e}</option>))}
基本上,组件在安装后不会呈现selectpicker。我们必须更新组件装载的下拉列表。
问题是这个项目中使用的引导程序选择库
我选择了类别为selectpicker
的下拉列表。
从这个问题中,我发现下拉菜单不再需要selectpicker类。相反,我每次都在componentDidMount
中触发selectpicker
库。
import $ from 'jquery';
import 'bootstrap-select';
componentDidMount(){
$('select').selectpicker() <<-- This triggers the library on component mount
}
因此,组件每次渲染时都会加载selectpicker。