如何调试这个错误：未捕获的（以诺）错误：对象是不是有效的做出反应的孩子

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/> 
     } 
    } 
});