Javascript 从json数据对对象进行迭代

我有以下代码：

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')
);

从“react dom”导入ReactDom；
从“React”导入React；
从'react dom'导入{render}；
从“jquery”导入美元；
类News扩展了React.Component{
渲染（）{
var新闻=[]；
this.props.news.forEach（函数（el，i）{
新闻。推（）；
});
返回(
{新闻}
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：“”
}
}
mapObject（对象，回调）{
返回Object.keys（对象）.map（函数（键）{
返回回调（key，object[key]）；
});
}
组件安装（）{
const newsfeedURL=https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
$.get（newsfeedURL，函数（结果）{
this.setState（{data:JSON.parse（result）}）；
log（this.state.data.messages的类型）；
}.约束（这个）；
}
渲染（）{
返回(
{Object.keys（this.state.data.messages）.map（函数（键）{
返回键：{Key}，值：{this.state.data.messages[Key]}；
})}
)
}
}
ReactDom.render(
,
document.getElementById（'app'）
);

我正在尝试迭代“this.state.data.messages”以在render方法中输出一些数据

在键入“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>;
            })}

{Object.keys（this.state.data.messages）.map（函数（键）{
返回键：{Key}，值：{this.state.data.messages[Key]}；
})}

但是，我的控制台中有以下内容：

未捕获的TypeError:无法将未定义或null转换为对象

---

您将在异步调用返回之前进行渲染

---

你需要在有数据之前处理这个案子。如果没有其他更改，则应更改初始状态以更好地匹配所需的状态。

这里的问题是您最初将数据设置为空字符串。在您的

组件didmount

中，您正在进行ajax调用，由于它是异步的，所以react仍将呈现。一旦呈现，它将尝试访问

this.state.data.messages

，而

this.state.data

是一个空字符串，因此没有称为messages的属性

如果

this.state.loading===true

在div中呈现其他内容，并且如果

this.state.loading==false&&this.state.data.messages

实际返回您现在尝试执行的操作，我将在渲染方法中使用名为loading的初始状态属性

在解析JSON响应时，请确保将加载状态设置为false

this.state = {
   data: '',
   loading: true
}
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),
          loading: false
        });
        console.log(typeof this.state.data.messages);
    }.bind(this));
}
render () {
  let content;
  if (this.state.loading === false && this.state.data.messages) {
    content = {Object.keys(this.state.data.messages).map(function(key) {
      return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
    })}
  } else { 
    content = ''; // whatever you want it to be while waiting for data
  }
  return (
    <div>
      {content}
    </div>
  )
}

this.state={
数据：“”，
加载：正确
}
组件安装（）{
const newsfeedURL=https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
$.get（newsfeedURL，函数（结果）{
这是我的国家({
数据：JSON.parse（结果），
加载：错误
});
log（this.state.data.messages的类型）；
}.约束（这个）；
}
渲染（）{
让内容；
if（this.state.load===false&&this.state.data.messages）{
content={Object.keys（this.state.data.messages）.map（函数（键）{
返回键：{Key}，值：{this.state.data.messages[Key]}；
})}
}否则{
content=''；//在等待数据时，无论您希望它是什么
}
返回(
{content}
)
}

是否为

this.state.data.messages===null

？