[英]How to debug this error: Uncaught (in promise) Error: Objects are not valid as a React child
The full error in console: 控制台中的完整错误:
Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {id, name, description, css, ephemeral, readonly, topPost})
未捕获(在承诺中)错误:对象作为React子对象无效(找到:具有键{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.如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象。 Check the render method of
exports
.(…)检查
exports
的render方法。(...)
I don't really know what this error means and it doesn't point me to a line in the code, so I don't know what to do. 我真的不知道这个错误意味着什么,它并没有指向代码中的一行,所以我不知道该怎么做。
I am using api.jsx to fetch data from Imgur (specifically I call it in topic-store.jsx ) and then trying to render the data in topic-list.jsx 我正在使用api.jsx从Imgur获取数据(特别是我在topic-store.jsx中调用它),然后尝试在topic-list.jsx中呈现数据
main.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 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>
}
});
topic-list.jsx 话题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>
});
}
});
topic-store.jsx 话题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 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()
});
}
};
The issue relies on the way you render your topic object in the renderTopics
method. 该问题依赖于在
renderTopics
方法中呈现主题对象的方式。
When you're doing something like this: 当你做这样的事情时:
return <li>{topic}</li>
You're basically trying to do: 你基本上是想做:
return <li>{{ id: 1, name: 'One topic' }}</li>
And React don't know how to render a raw object. 并且React不知道如何渲染原始对象。 To fix your issue, specify which keys of your object you want to render.
要解决您的问题,请指定要渲染的对象的哪些键。 For example:
例如:
renderTopics: function () {
return this.state.topics.map(function(topic) {
return (<li>{topic.id} {topic.name}</li>)
});
}
You are missing <ul></ul>
or <ol></ol>
tag in topic-list.jsx 您在topic-list.jsx中缺少
<ul></ul>
或<ol></ol>
标记
Using <ul></ul>
tag in the render call for topics: 在主题的渲染调用中使用
<ul></ul>
标记:
render: function () {
return <div className="list-group">
Topic List
<ul>
{this.renderTopics()}
</ul>
</div>
},
Update: Incorporating comments from Aperçu for completeness 更新:纳入Aperçu的评论以确保完整性
You need to get the values from the json blob (does not render Raw content): 您需要从json blob获取值(不呈现Raw内容):
For topic being {id:1, name:Topic1}
主题为
{id:1, name:Topic1}
renderTopics: function () {
return this.state.topics.map(function(topic) {
return <li>
{topic.id}{topic.name}
</li>
});
}
to complete previous answers, add brackets arround your JSX returned in render functions 要完成以前的答案,请在渲染函数中返回的JSX中添加括号
exemple main.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/>
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.