Javascript 如何调试此错误：Uncaught (in promise) Error: Objects are not valid as a React child

How to debug this error: Uncaught (in promise) Error: Objects are not valid as a React child

提问by Mjuice

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})
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.(…)

未捕获的（以诺）错误：对象是不是有效的做出反应的孩子（发现：用钥匙对象{ID，名称，描述，CSS，短暂的，只读的，topPost}）
如果你的意思是使孩子们的集合，使用数组相反，或者使用 React 附加组件中的 createFragment(object) 包装对象。检查exports.(...)的渲染方法

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.jsxto 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

主文件

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

头文件.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

主题列表.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

主题商店.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()
        });
    }
};

回答by Balthazar

The issue relies on the way you render your topic object in the renderTopicsmethod.

该问题取决于您在方法中呈现主题对象的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. To fix your issue, specify which keys of your object you want to render. For example:

而 React 不知道如何渲染原始对象。要解决您的问题，请指定您要渲染的对象的哪些键。例如：

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

回答by nitishagar

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?ufor completeness

更新：纳入Aper?u 的评论以确保完整性

You need to get the values from the json blob (does not render Raw content):

您需要从 json blob 中获取值（不呈现原始内容）：

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

回答by Martin Bieth

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