Wie um diesen Fehler debuggen: Uncaught (in Versprechen) Fehler: Objekte nicht gültig sind als in der Konsole Kind

Question

Der vollständige Fehler Reaktion:

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

Ich weiß nicht wirklich, was diese Fehler Mittel und es doesn Zeig mir nicht eine Zeile im Code, also weiß ich nicht, was ich tun soll.

Ich verwende api.jsx Daten von Imgur zu holen (speziell nenne ich es in themen store.jsx) und dann die Daten in themen list.jsx zu machen versucht

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

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

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

Answer 1

Das Problem, das Sie Ihr Thema Objekt in der renderTopics Methode machen auf dem Weg beruht.

Wenn Sie so etwas wie dies tun:

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

und darauf zu reagieren wissen nicht, wie ein rohes Objekt zu machen:

return <li>{topic}</li> 

Sie sind im Grunde zu tun versuchen. Um das Problem zu beheben, geben Sie an, welche Tasten Ihres Objekts gerendert werden sollen.Zum Beispiel:

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

Answer 2

Sie fehlen <ul></ul> oder <ol></ol> Tag in themen list.jsx

Mit <ul></ul> Tag im Aufruf machen für Themen:

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

---

Update: Einbeziehung Kommentare von Aperçu zur Vollständigkeit

Sie müssen die bekommen Werte aus dem json Blob (rendert nicht Raw-Gehalt):

Zum Thema sein {id:1, name:Topic1}

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

Answer 3

vorherigen Antworten vervollständigen, fügen Sie Klammern arround Ihre JSX lieferte in Funktionen machen

exemple main.jsx: noch

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