React从json数据迭代对象 [英] React iterate over object from json data

问题描述

我有以下代码：

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来输出一些数据渲染方法。

I am trying ti iterate over "this.state.data.messages" to output some data inside the render method.

输入console.log（typeof this.state.data.messages）;之后我已经收集到this.state.data.messages是一个对象，因此如下：

After typing this "console.log(typeof this.state.data.messages);" I have gathered that "this.state.data.messages" is an object hence the following:

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

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

however I have the following inside my console:

Uncaught TypeError：无法将undefined或null转换为object

Uncaught TypeError: Cannot convert undefined or null to object

推荐答案

这里的问题是您最初将数据设置为空字符串。在 componentDidMount 中，您正在进行ajax调用，因为它的异步反应仍会呈现。一旦它呈现它试图访问 this.state.data.messages 哪个 this.state.data 是一个空字符串因此将没有名为messages的属性。

The problem here is you are initially setting data as an empty string. In your componentDidMount you are making the ajax call and since it's async react will still render. Once it renders it's trying to access this.state.data.messages which this.state.data is an empty string so will have no property called messages.

我要做的是有一个名为loading的初始状态属性，如果 this.state，则在你的render方法中.loading === true 在div中渲染其他东西，如果 this.state.loading === false&& this.state.data.messages 实际上返回你现在要做的事情。

What I would do is have an initial state property called loading and in your render method if this.state.loading === true render something else in the div and if this.state.loading === false && this.state.data.messages actually return what your trying to do now.

当你确定将加载状态设置为false时解析JSON响应

Just make sure to set state of loading to false when you parse the JSON response

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>
  )
}

这篇关于React从json数据迭代对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！