Реагировать на синтаксический анализ JSON данных с несколькими адресами

Question

Я пытаюсь получить доступ к данным JSON, но идентификаторы JSON используют несколько слов. Данные JSON форматируются следующим образом:

    "Meta Data": {
        "1. Information": "Intraday (5min) open, high, low, close prices and volume",
        "2. Symbol": "IBM",
        "3. Last Refreshed": "2020-04-02 16:00:00",
        "4. Interval": "5min",
        "5. Output Size": "Compact",
        "6. Time Zone": "US/Eastern"
    },
    "Time Series (5min)": {
        "2020-04-02 16:00:00": {
            "1. open": "109.5600",
            "2. high": "110.3200",
            "3. low": "109.4300",
            "4. close": "110.0400",
            "5. volume": "421231"
        },
//...

Я использую:

componentDidMount() {
    fetch('https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=IBM&interval=5min&apikey=demo')
    .then(res => res.json())
    .then((data) => {
      this.setState({ StockInfo: data })
    })
    .catch(console.log)
  }

для извлечения данных.

console.log(StockInfo["Meta Data"])

Эта строка работает для доступа к Однако данные с

console.log(StockInfo["Meta Data"]["1. Information"]

Я получаю сообщение об ошибке: Ошибка типа: Не удается прочитать свойство '1. Информация неопределена. Кроме того,

console.log(StockInfo[0]) //or
console.log(StockInfo["Meta Data"][0]

также выдает такую ​​же ошибку.

Answer 1

Вы получаете неопределенное значение, потому что функция render вызывается перед componentDidMount, а также вы делаете асинхронный вызов. Поэтому в рендере выполните проверку, если она доступна.

 render() {
    if (!this.state.StockInfo["Meta Data"]) {
      return null;
    }
    return (
      <div>
         {this.state.StockInfo["Meta Data"]["1. Information"]}
      </div>
    );
  } 

Stackblitz: https://stackblitz.com/edit/react-dnzze3