React从json数据迭代对象

React iterate over object from json data

本文关键字：迭代 对象 数据 json React      更新时间：2023-09-26

我有以下代码:

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

输入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: Cannot convert undefined or null to object

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

我要做的是有一个初始状态属性称为加载和在你的渲染方法，如果this.state.loading === true渲染别的东西在div和如果this.state.loading === false && this.state.data.messages实际上返回你现在想做的。

请确保在解析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>
  )
}

你要在异步调用返回之前进行渲染。

你需要在有数据之前处理这个案例。如果没有别的，你应该改变初始状态，以更好地匹配你所期望的状态。

相关文章：