javascript - 如何在对象数组上使用 map

Question

在 React 中使用此数据集来列出数据状态:

[
   {
      "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>

而且它不工作。我得到一个空白的下拉列表。

Answer 1

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

上应用 map()

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