Javascript 如何调试此错误：未捕获（承诺中）错误：对象作为子对象无效

控制台中的完整错误：

未捕获（承诺中）错误：对象作为React子对象无效（找到：具有键{id、名称、说明、css、临时、只读、topPost}的对象）
如果要呈现子对象集合，请改用数组，或使用React附加组件中的createFragment（object）包装对象。检查

导出的渲染方法（…）

我真的不知道这个错误是什么意思，也不知道代码中有哪一行，所以我不知道该怎么做

我正在使用api.jsx从Imgur获取数据（特别是在topic store.jsx中调用它），然后尝试在topic list.jsx中呈现数据

main.jsx

var React=require（'React'）；
变量标题=要求（“./标题”）；
var TopicList=require（“./主题列表”）；
module.exports=React.createClass({
渲染：函数（）{
返回
{this.content（）}
},
内容：功能（）{
如果（本.道具.儿童）{
归还这个。道具。孩子们
}否则{
返回
}
}
});

header.jsx

var React=require（'React'）；
var-Router=require（'react-Router'）；
var-Link=路由器.Link//路由器的链接对象是一个可渲染组件，在渲染时会变成锚定标记
//使用链接允许用户在不触发整页刷新的情况下更改路由，页面上的内容将更改，但浏览器不会刷新
module.exports=React.createClass({
渲染：函数（）{
返回
Imgur浏览器

主题#1

}
});

主题列表.jsx

var React=require（'React'）；
var TopicStore=require（“../stores/topic store”）；
module.exports=React.createClass({
getInitialState:函数（）{
返回{主题：[]}
},
componentWillMount:函数（）{
TopicStore.getTopics（）.then（函数（）{
//我们已成功获取主题
//主题可在TopicStore.Topics上找到
这是我的国家({
主题：TopicStore.topics
});
}.约束（这个）；
},
渲染：函数（）{
返回
主题列表
{this.renderTopics（）}
},
renderTopics:函数（）{
返回this.state.topics.map（函数（主题）{
返回

{主题}

});
}
});

主题存储.jsx

var-Api=require（'../utils/Api'）；
var回流=需要（“回流”）；
module.exports=reflow.createStore({
getTopics:function（）{
返回Api.get（'topics/defaults'）。然后（函数（json）{
this.topics=json.data；
}.约束（这个）；
}
});

api.jsx

var Fetch=require（'whatwg-Fetch'）；
var rootUrl='1〕https://api.imgur.com/3/';
变量apiKey='e80dc51eb3f6d56'；
module.exports=window.api={
获取：函数（url）{
返回fetch（rootUrl+url{
标题：{
“授权”：“客户端ID”+apiKey
}
}).然后（功能（响应）{
返回response.json（）
});
}
};
您在主题列表中缺少
或
标记。jsx

在主题的呈现调用中使用
标记：

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

这个问题取决于您在
renderTopics
方法中呈现主题对象的方式

当你做这样的事情时：

返回
{topic}

你基本上是想做：

return
{{id:1，name:'One topic'}

我不知道如何渲染原始对象。若要解决此问题，请指定要渲染对象的哪些关键帧。例如：

renderTopics:function（）{
返回this.state.topics.map（函数（主题）{
返回（
{topic.id}{topic.name}
）
});
}
要完成前面的回答，请在渲染函数中返回的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/>
        }
    }
});

var React=require（'React'）；
变量标题=要求（“./标题”）；
var TopicList=require（“./主题列表”）；
module.exports=React.createClass({
渲染：函数（）{
返回(
{this.content（）}
);
},
内容：功能（）{
如果（本.道具.儿童）{
归还这个。道具。孩子们
}否则{
返回
}
}
});
我做了此更改，但仍然收到相同的错误。@mUICE您可以尝试更改
if..else
此处：
if（this.props.children）{return this.props.children}else{return}
以仅使用，并查看编辑是否有效。介意引用我的答案，而不是不加署名地编辑吗？Sry for the@Aperçu-补充道：）只是为了文档——我确实尝试了整个过程，然后发布了它——尽管使用了相同的语言
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/>
        }
    }
});