reagieren json Objekte sind nicht als ein react Kind

Question

Ich verwende das React-Rails-Juwel und Zugriff auf ein JSON-Objekt items von einem Rails-Controller.

Rails-Controller:

class ItemsController < ApplicationController 
    def index 
    @items = Item.all 
    render json: @items 
    end 
end 

Reagieren Mein App Komponente diese Elemente greift und versucht, es als Stütze passieren zu einer untergeordneten Komponente:

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      items: {}, 
      activeTab: 'items' 
     }; 
    } 

    componentDidMount() { 
     $.getJSON('/items.json', (response) => { 
      this.setState({ items: response }) 
     }); 
    } 

    render() { 
     return (
      <div> 
       <ItemsContent items={this.state.items}> 
      </div> 
     ); 
    } 
} 

Und dieses Kind Komponente sieht wie folgt aus:

class ItemsContent extends React.Component { 
    render() {   
    return (
     <div> 
     <div>Items: {this.props.items}</div> 
     </div> 
    ); 
    } 
} 

ItemsContent.propTypes = { 
    items: React.PropTypes.object 
}; 

Und ich bekomme diese Fehlermeldung:

react.js?body=1:1324 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {}). 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 `ItemsContent`. 

Wie kann ich das umgehen? Gibt es eine Möglichkeit, JSON-Objekte in meinen React-Komponenten einfach zu verwenden?

Gerade jetzt habe ich versucht, in einem Array das JSON-Objekt Einwickeln:

  tabbedContent = <ItemsContent items={[this.state.items]}></ItemsContent>; 

Answer 1

Da this.state.items ein Array ist, können Sie nicht alle so die Elemente in einem Array auskippen. Sie können den JavaScript-Array-API verwenden und über die Elemente durchlaufen und sie wie so angezeigt werden:

class ItemsContent extends React.Component { 
    render() {   
    return (
     <div> 
     { 
      this.props.items.map(function(item) { 
       return <div> Item : {item} </div> 
     } 
     </div> 
    ); 
    } 
} 

ItemsContent.propTypes = { 
    items: React.PropTypes.object 
}; 

Wenn Sie nur wird jedes Mal dann Karte ein einzelnes Objekt immer wieder nicht funktionieren und Sie müssen das Objekt auszubrechen durch Eigenschaft, um alles anzuzeigen:

render() {   
     return (
      <div> 
       <div> Item : {this.props.items.a} , {this.props.items.b}, {this.props.items.c} </div> 
      </div> 
     ); 
} 

Answer 2

Sie über die Liste in render() von App Component laufen können. Und erstellen Sie ein React.Component-Element für jedes Element.

App.js

render() { 
     return (
      <div> 
       this.state.items.map(function(item){ 
        <Item value={item} key={}> 
       }); 
      </div> 
     ); 
    } 

In Item.js

class Item extends React.Component { 
    render() {   
    return (
     <div> 
     return <div> Item : {this.props.value} </div> 
     </div> 
    ); 
    } 
} 

Item.propTypes = { 
    value: React.PropTypes.object 
};