下拉列表不显示默认项目答案

【问题标题】：Dropdown list not showing default item下拉列表不显示默认项目
【发布时间】：2019-01-28 06:02:18
【问题描述】：

我正在使用 semantic-ui-react 下拉列表，我工作得很好。问题是，在我的表单上，我使用 Mobx 存储从数据库中提取数据。我为下拉列表中的选项设置了一个数组。当表单从商店加载时，下拉列表的文本字段为空白，如果单击下拉列表，我可以看到所选选项突出显示（粗体）。如何让文本字段显示默认选项。如果有人可以查看它并告诉我我需要做什么，我在下面包含了一些代码。

感谢您的所有帮助。

这是下拉列表的代码：

<div className="col-sm-3">
  <div className="bg-primary text-white text-center">
    Driver
  </div>
<div>
  <Dropdown
    selection
    fluid
    id="driver"
    name="driver"
    ref="driver"
    onChange={this.handleChange}
    value={this.props.EquipmentStore.truck_detail.driver}
    options={this.props.EquipmentStore.driver_list}/>
  </div>
</div>

这是我构建 driver_list 的方式，我基本上是从数据库中获取用户列表并创建一个包含值和文本字段的数组

let newUserItem = {
    value: getUser.id,
    text: getUser.first_name + " " + getUser.last_name
};
this.driver_list.push(newUserItem)

truck_detail.driver 中的值是一个数字值，与 driver_list 值字段中的 value 字段中的值相同...一切正常，我无法获取要在文本字段中显示的文本值默认下拉列表。

这是我用来构建选项列表的代码：

async loadDriverList() {
    let endpoint = '/api/users/profile/?owner=True';
    this.driver_list.length = 0;
    let lookupOptions = {
        method: "GET",
        headers: {
            'Content-Type': 'application/json'
        }
    };
    try {
        const response = await fetch(endpoint, lookupOptions);
        const profile_list = await response.json();
        const userItem = {value:0, text:'Select Driver'};
        this.driver_list.push(userItem);
        let array_length = profile_list.length;
        for (let i = 0; i < array_length; i++) {
            let ownerId = profile_list[i].user;
            let endpoint = '/api/users/users/' + ownerId + '/';
            let userList = await fetch(endpoint, lookupOptions);
            let getUser = await userList.json();
            let newUserItem = {
                value: getUser.id,
                text: getUser.first_name + " " + getUser.last_name
            };
            this.driver_list.push(newUserItem)
        }
    } catch(e) {
        console.log(e)
    }
}

【问题讨论】：

您能否发布一个输入下拉菜单的数据示例？
我已经编辑了我的帖子以包含用于构建选项列表的代码。该代码位于 MobX 商店中。
然后您只需将一些数据输入到下拉列表中，例如：const driver_list = [{text: 'Driver', value: 1}, {text: 'Driver 2', value: 2}]?文本是否位于对象中的值之前？另外，this.props.EquipmentStore.truck_detail.driver 是像 2 这样的数字吗？只是一个数字，没有钥匙还是什么？
这可能只是一些奇怪的东西，比如下拉列表需要文本之前的值。语义可以像那样真的很有趣
好的，我已经修复了它...问题是在呈现表单时还没有填充drivers_list。毕竟为了填充列表，我正在使用对数据库的 api 调用。我将代码移到了链中的其他位置，现在它正在工作....非常感谢您的帮助。

标签： reactjs dropdown semantic-ui-react

【解决方案1】：

经过与 Predrag Beocanin 的大量交谈，我已经解决了这个问题。它归结为我的表单（带有下拉菜单）在选项列表完全填充之前得到渲染。在我的应用程序中，我有一个显示项目列表的表单，一旦您单击该项目，它将呈现该列出项目的详细表单。最初，一旦您单击要查看详细信息的项目，我就会尝试填充我的选项列表。因为选项列表基本上是一个静态列表，所以我现在在您查看第一个表单时填充该列表。现在，当您单击该项目以查看下拉选项时，已完全填充并按我预期的方式工作。

感谢您的帮助 Predrag。

【讨论】：