陣營不變違規：對象是不是有效的做出反應的孩子

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>