React Invariant Violation:对象作为React子对象无效

Question

我有以下代码:

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


class App extends React.Component {
    constructor(props) {
        super(props);
        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(key => {
         return <div key={key}>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>
      )
    }
}


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

但我收到以下错误:

未捕获的不变违规:对象作为React子项无效(找到:具有键的对象{body,附件,视频,主题,updated_at,id,subject,downvotes,author,posted_at,comments,user_vote,upvotes,status,tags,locations ,track_impact,user_is_following,comments_count}).如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象.检查渲染方法App.

我看了一下这个答案,但它对我的情况没有帮助:不变违规:对象无效作为React孩子

Answer 1

你的div里面你试图渲染Value: {this.state.data.messages[key]}哪个是一个对象.您不能使用React的JSX直接渲染对象.然而,您可以渲染的是此对象中保存的一些实际原始数据类型(例如字符串,数字),例如,Value: {this.state.data.messages[key].body}将呈body现在对象属性处保存的字符串值.这是一个演示:http://codepen.io/PiotrBerebecki/pen/bwowxP

class App extends React.Component {
    constructor(props) {
        super(props);
        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(key => {
         console.log(this.state.data.messages[key])
         return <div key={key}><b>Key: {key},</b> Value: {this.state.data.messages[key].body}</div>;
        })
      } else { 
        content = ''; // whatever you want it to be while waiting for data
      }
      return (
        <div>
          {content}
        </div>
      )
    }
}


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