У меня есть следующий код:

import ReactDom from 'react-dom';
import React from 'react';
import {render} from 'react-dom';
import $ from 'jquery';

class News extends React.Component {
  render () {
    var news = [];
    this.props.news.forEach(function(el, i){
        news.push(<SingleNews key={i} img={el.img} />);
    });
    return (
      <section className="news-wrapper">
          {news}
      </section>
    );
  }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          data: ''
        }
    }
    mapObject(object, callback) {
      return Object.keys(object).map(function (key) {
        return callback(key, object[key]);
      });
    }
    componentDidMount () {
      const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
      $.get(newsfeedURL, function(result) {
        this.setState({data: JSON.parse(result)});
        console.log(typeof this.state.data.messages);
      }.bind(this));
    }
    render () {
        return (
            <div>
                {Object.keys(this.state.data.messages).map(function(key) {
                    return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
                })}
            </div>
        )
    }
}


ReactDom.render(
  <App />,
  document.getElementById('app')
);

Я пытаюсь перебрать this.state.data.messages, чтобы вывести некоторые данные внутри метода рендеринга.

После ввода этого "console.log (typeof this.state.data.messages);" Я понял, что «this.state.data.messages» является объектом, следовательно, следующее:

            {Object.keys(this.state.data.messages).map(function(key) {
                return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
            })}

однако у меня внутри консоли есть следующее:

Uncaught TypeError: Невозможно преобразовать неопределенный или нулевой объект