按下后未显示数据的组件



以下代码显示首次呈现组件时的国家列表。

<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。

相关内容

  • 没有找到相关文章

最新更新