如何使用 map function 显示 json 在 React.js 上的组件键上有空格

Question

我正在尝试使用股票市场的 API，因此我在提交表单并收到此 JSON Bellow 并将其值存储在 Hook 时进行了 API 调用。

    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "IBM",
        "3. Last Refreshed": "2020-12-04",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2020-12-04": {
            "1. open": "123.9700",
            "2. high": "127.3800",
            "3. low": "123.6400",
            "4. close": "127.2000",
            "5. volume": "5522760"
        },
        "2020-12-03": {
            "1. open": "124.1600",
            "2. high": "124.8600",
            "3. low": "123.2900",
            "4. close": "123.6100",
            "5. volume": "4548161"
        }
}

所以我创建了两个简单的组件：StockList 和 StockItem，StockList 用于渲染所有 StockItem，我无法访问 StockItem 中 JSON 的值，因为我不知道如何显示这些键上有空格的数据。 通常json是这样的：

  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    }

使用 map 很容易显示，如下所示：

users.map((user) => {
   return(
     <p>{user.name}</p>
     <p>{user.username}</p>
   )
});

当我尝试使用 map 来解决这个问题时，我得到了未定义的属性。

Answer 1

访问键上有空格的数据。

user['key'] => 

example : user['first name']

 let a = {"first name": 'dileep'}; console.log(a['first name'])