如何調試這個錯誤：未捕獲的（以諾）錯誤：對象是不是有效的做出反應的孩子

Question

完整的錯誤控制檯：

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {id, name, description, css, ephemeral, readonly, topPost})
If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of exports .(…)

我真的不知道這是什麼錯誤的手段和它doesn我沒有把我指向代碼中的一行，所以我不知道該怎麼做。

我使用api.jsx從Imgur（具體我把它稱爲話題store.jsx），然後試圖呈現話題list.jsx數據獲取數據

main.jsx

var React = require('react'); 
var Header = require('./header'); 
var TopicList = require('./topic-list'); 

module.exports = React.createClass({ 
    render: function() { 
     return <div> 
      <Header /> 
      {this.content()} 
     </div> 
    }, 
    content: function() { 
     if (this.props.children) { 
      return this.props.children 
     } else { 
      return <TopicList/> 
     } 
    } 
}); 

header.jsx

var React = require('react'); 
var Router = require('react-router'); 
var Link = Router.Link; //Router's Link object is a renderable component, that turns into an anchor tag when rendered 
//Using Link allows a user to change routes without triggering a full page refresh, the content on the page will change but the browser will not refresh 

module.exports = React.createClass({ 
    render: function() { 
     return <nav className="navbar navbar-default header"> 
      <div className="container-fluid"> 
      <Link to="/" className="navbar-brand"> 
       Imgur Browser 
      </Link> 
      <ul className="nav navbar-nav navbar-right"> 
       <li><a>TopiC#1</a></li> 
      </ul> 
      </div> 
     </nav> 
    } 
}); 

話題list.jsx

var React = require('react'); 
var TopicStore = require('../stores/topic-store'); 

module.exports = React.createClass({ 

    getInitialState: function() { 
     return {topics: []} 
    }, 

    componentWillMount: function() { 
     TopicStore.getTopics().then(function() { 
      //We have successfully fetched topics 
      //Topics are available on TopicStore.topics 
      this.setState({ 
       topics: TopicStore.topics 
      }); 
     }.bind(this)); 
    }, 

    render: function() { 
     return <div className="list-group"> 
      Topic List 
      {this.renderTopics()} 
     </div> 
    }, 

    renderTopics: function() { 
     return this.state.topics.map(function(topic) { 
      return <li> 
       {topic} 
      </li> 
     }); 
    } 
}); 

話題store.jsx

var Api = require('../utils/api'); 
var Reflux = require('reflux'); 

module.exports = Reflux.createStore({ 

    getTopics: function() { 

     return Api.get('topics/defaults').then(function(json) { 

      this.topics = json.data; 

     }.bind(this)); 
    } 
}); 

api.jsx

var Fetch = require('whatwg-fetch'); 
var rootUrl = 'https://api.imgur.com/3/'; 
var apiKey = 'e80dc51eb3f6d56'; 

module.exports = window.api = { 
    get: function(url) { 
     return fetch(rootUrl + url, { 
      headers: { 
       'Authorization': 'Client-ID ' + apiKey 
      } 
     }).then(function (response) { 
      return response.json() 
     }); 
    } 
}; 

Answer 1

問題依賴於您呈現在renderTopics方法您的主題對象的方式。

當你做這樣的事情：

return <li>{topic}</li> 

你基本上試圖做的：

return <li>{{ id: 1, name: 'One topic' }}</li> 

和應對不知道如何渲染原始對象。要解決您的問題，請指定要渲染的對象的哪些鍵。例如：

renderTopics: function() { 
    return this.state.topics.map(function(topic) { 
    return (<li>{topic.id} {topic.name}</li>) 
    }); 
} 

Answer 2

你缺少<ul></ul>或<ol></ol>標籤在話題list.jsx

在渲染調用使用<ul></ul>標籤爲主題：

render: function() { 
    return <div className="list-group"> 
     Topic List 
     <ul> 
     {this.renderTopics()} 
     </ul> 
    </div> 
}, 

---

更新：納入意見從APERCU完整性

您需要獲取從JSON BLOB值（不呈現原始內容）：

對於主題是{id:1, name:Topic1}

renderTopics: function() { 
    return this.state.topics.map(function(topic) { 
     return <li> 
      {topic.id}{topic.name} 
     </li> 
    }); 
} 

Answer 3

完成以前的答案，加上括號角落找尋你的JSX中返回渲染功能

爲例main.jsx：

var React = require('react'); 
var Header = require('./header'); 
var TopicList = require('./topic-list'); 

module.exports = React.createClass({ 
    render: function() { 
     return (
      <div> 
      <Header /> 
      {this.content()} 
      </div> 
     ); 
    }, 
    content: function() { 
     if (this.props.children) { 
      return this.props.children 
     } else { 
      return <TopicList/> 
     } 
    } 
});