时间戳

首页 > 解决方案 > 访问数据并在下拉列表中显示

reactjs - 访问数据并在下拉列表中显示

问题描述

我有数据：

Rooms.
Rooms   : {"_id":{"$oid":"46746766474664"},"RoomID":{"$numberInt":"1"},"RoomDesc":"1st Floor"}

我正在尝试访问并在下拉列表中显示它们。

安装时我正在执行此操作。

mongodb.db("TestDB")
            .collection("Rooms")
            .find({}, { limit: 1000 })
            .asArray()
            .then(rooms => {
                this.setState({ rooms });
            });

在可靠的下拉列表中，

   <Dropdown
                                placeholder='Select Rooms'
                                fluid
                                search
                                selection
                                options={this.state.rooms.RoomID}
                                //value={RoomID}
                            />

它总是返回 Null 没有条目。我怎样才能访问这些数据？我应该使用地图（或）任何其他建议。有没有办法可以在控制台上构建。

从 mongodb 提示所有结果看起来都很好。

标签： reactjsmongodb

解决方案

我认为您正在使用Dropdown - Semantic UI React.you 得到一个没有值的下拉列表，因为您的状态结构。下拉options应该是这样的

 {
    key: "....",
    text: "...",
    value: "..."
  }

使用 map 函数转换行数据以满足 Dropdown 的最低要求。 如果 MongoDB 返回结果，则
更新

 rooms: [
        {
          _id: { $oid: "46746766474664" },
          RoomID: { $numberInt: "1" },
          RoomDesc: "1st Floor"
        },
        {
          _id: { $oid: "46746766474665" },
          RoomID: { $numberInt: "2" },
          RoomDesc: "2st Floor"
        }
      ]

然后您可以转换为理想的结构 

  this.setState({
          options: [
            ...this.state.rooms.map(item => {
              return {
                key: item._id.$oid,
                text: item.RoomDesc,
                value: item.RoomID.$numberInt
              };
            })
          ]
        });

使用虚拟数据工作的临时Codesandbox 示例。

推荐阅读