组件在按回时不显示数据

Question

以下代码显示组件第一次渲染时的国家列表。

<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 country-list --> 获取国家/地区的包

提前致谢

Answer 1

请删除函数映射上的 return 并且您的标签选项属性键必须是唯一的，即使正确删除函数 getNames 对您的代码也没有任何问题。希望有用。

{getNames().map((e, id) => (<option key={id} >{e}</option>))}

Answer 2

基本上，组件在安装后不会呈现 selectpicker。我们必须更新组件安装的下拉列表。

问题出在这个项目中使用的bootstrap-select库

我有 select 个下拉列表，其中 class 个 selectpicker。

从 this 问题中，我发现下拉列表不再需要 select 选择器 class。相反，我每次都在 componentDidMount 中触发 selectpicker 库。

import $ from 'jquery';
import 'bootstrap-select';

componentDidMount(){
$('select').selectpicker()   <<-- This triggers the library on component mount
}

所以组件每次呈现时都会加载 select选择器。

组件在按回时不显示数据

Component not showing data on pressing back

javascript

arrays

reactjs

react-redux