阵营不变违规：对象是不是有效的做出反应的孩子

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

，但我收到以下错误：

未捕获不变违规：对象是不是有效（找到：包含关键字的对象{body，attachments，videos，topics，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的渲染方法。

我看看这个答案，但它并不在我的情况有所帮助：Invariant Violation: Objects are not valid as a React child

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

Answer 2

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: result, 
 
         loading: false 
 
        }); 
 
       }.bind(this)); 
 
    } 
 
    render() { 
 
     let content; 
 
     if (this.state.loading === false && this.state.data.messages) { 
 
     content = this.state.data.messages.map((ele,key) => { 
 
     return <div key={key}>id: {this.state.data.messages[key].id}</div>; 
 
     }) 
 
     } else { 
 
     content = ''; // whatever you want it to be while waiting for data 
 
     } 
 
     return (
 
     <div> 
 
      {content} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>