Comment déboguer cette erreur: Uncaught (en promesse) Erreur: Les objets ne sont pas valides comme un enfant Réagir

Le plein d'erreur dans la console:

Non interceptée (promesse) Erreur: les Objets ne sont pas valides comme Réagir enfant (trouvé: objet avec les touches {id, nom, description, css, éphémère, readonly, topPost})
Si vous rendre une collection d'enfants, utiliser un tableau à la place ou à envelopper l'objet à l'aide createFragment(objet) de l'Réagissent add-ons. Vérifier la méthode de rendu de exports.(...)

Je ne sais pas vraiment ce que cette erreur signifie et il ne veut pas me pointer à une ligne dans le code, donc je ne sais pas quoi faire.

Je suis en utilisant api.jsx pour récupérer des données de Imgur (plus précisément je l'appelle dans sujet-magasin.jsx), puis en essayant de rendre les données dans sujet-liste.jsx

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

en-tête.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>
    }
});

sujet-liste.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>
        });
    }
});

sujet-magasin.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()
        });
    }
};

source d'informationauteur Mjuice

  1. 24

    La question repose sur la façon dont vous effectuez le rendu de votre sujet et de l'objet dans le renderTopics méthode.

    Lorsque vous êtes en train de faire quelque chose comme ceci:

    return <li>{topic}</li>

    Vous tentons de faire:

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

    De Réagir et de ne pas savoir comment rendre un objet brut. Pour résoudre votre problème, spécifiez les touches de votre objet que vous souhaitez rendre. Par exemple:

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

    Il vous manque <ul></ul> ou <ol></ol> balise dans sujet-liste.jsx

    À l'aide de <ul></ul> balise dans la file d'appel pour les sujets:

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

    Mise à jour: Incorporant les commentaires des Aperçu pour l'exhaustivité

    Vous avez besoin pour obtenir les valeurs de l'json blob (ne pas rendre son contenu Brut):

    Pour sujet {id:1, name:Topic1}

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

    pour compléter les réponses précédentes, ajoutez des crochets autour de votre JSX retourné dans le rendu des fonctions

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