如何在对象数组上使用地图

时间:2019-04-11 02:49:23

标签: javascript reactjs

在React中使用此数据集设置为listData状态:

[
   {
      "Key": "Anchorage TAC 82.tif",
      "LastModified": "2019-04-07T03:25:51.000Z",
      "ETag": "\"9f904f2219d1edf3fa39b171c98de924-6\"",
      "Size": 28135199,
      "StorageClass": "STANDARD"
   },
   {
      "Key": "CSA-L01.pdf",
      "LastModified": "2019-04-07T03:25:36.000Z",
      "ETag": "\"90f166238ae6b1f64120e984be743ba4\"",
      "Size": 3406742,
      "StorageClass": "STANDARD"
   }
]

如何将键值映射到下拉列表中。我尝试过:

<select>
    <option>Please select a file:</option>
        {Object.keys(this.state.listData).map(val =>
        <option value={val.Key}>{val.Key}</option>) }
</select>

,它不起作用。我的下拉列表空白。

1 个答案:

答案 0 :(得分:2)

listData是一个数组,Object.keys(this.state.listData)将返回索引数组[0,1,2..]
。您需要删除Object.keys()并将map()直接应用于listData

<select>
    <option>Please select a file:</option>
        {
           this.state.listData.map(val =>(
              <option value={val.Key}>{val.Key}</option>
           ) 
        }
</select>