Jak debugować ten błąd: Uncaught (obietnicy) Błąd: Obiekty nie są ważne jako React dziecko

Question

Pełna błąd w konsoli:

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

ja naprawdę nie wiem, co to oznacza błąd i nie robi "Wskaż mi wiersz w kodzie, więc nie wiem co robić.

Używam api.jsx do pobierania danych z Imgur (konkretnie ja to nazywam w tematycznych store.jsx), a następnie starają się uczynić dane w tematycznych 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'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> 
    } 
}); 

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

temat-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

Problem polega na sposób uczynić swój temat obiektu w metodzie renderTopics.

Kiedy robisz coś takiego:

return <li>{topic}</li> 

jesteś w zasadzie próbuje zrobić:

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

i reagować nie wiem jak uczynić surowego obiektu. Aby rozwiązać problem, określ klucze obiektu, który chcesz renderować.Na przykład:

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

Answer 2

Brakuje <ul></ul> lub <ol></ol> tag w tematycznych list.jsx

Korzystanie <ul></ul> tag w zaproszeniu do renderowania tematów:

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

---

Aktualizacja: uwzględnieniem uwag od Aperçu dla kompletności

Musisz uzyskać wartości z kropelka json (nie czyni Raw zawartości):

Na temat bycia {id:1, name:Topic1}

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

Answer 3

wypełnić wcześniejsze odpowiedzi, dodać nawiasy arround swojej JSX zwrócone w renderowanie funkcje

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