Как отладить эту ошибку: Неподготовлено (в обещании) Ошибка: объекты недействительны в качестве дочернего элемента React

Полная ошибка в консоли:

Неподготовлено (в обещании) Ошибка: объекты недействительны в качестве дочернего элемента React (найдено: объект с ключами {id, name, description, css, ephemeral, readonly, topPost})
Если вы хотите отобразить коллекцию детей, используйте массив или оберните объект с помощью createFragment (object) из надстроек React. Проверьте метод рендеринга exports. (...)

Я действительно не знаю, что означает эта ошибка, и это не указывает мне на строку в коде, поэтому я не знаю, что делать.

Я использую api.jsx для извлечения данных из Imgur (в частности, я вызываю его в topic-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 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()
        });
    }
};

Ответ 1

Проблема зависит от способа отображения объекта темы в методе renderTopics.

Когда вы делаете что-то вроде этого:

return <li>{topic}</li>

В основном вы пытаетесь сделать:

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

И React не знает, как сделать необработанный объект. Чтобы устранить проблему, укажите, какие ключи вашего объекта вы хотите отобразить. Например:

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

Ответ 2

Вам не хватает тега <ul></ul> или <ol></ol> в topic-list.jsx

Использование тега <ul></ul> в вызове рендеринга для тем:

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

Обновление: Включение комментариев Aperçu для полноты

Вам нужно получить значения из json blob (не отображает содержимое Raw):

Для темы {id:1, name:Topic1}

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

Ответ 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/>
        }
    }
});