react jsonオブジェクトはReactの子としては無効です

Question

私はReact-Railsの宝石を使用していて、Railsのコントローラーからjsonオブジェクトitemsにアクセスしています。

Railsのコントローラ：

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

私はAppコンポーネントは、これらの項目にアクセスして、子コンポーネントに小道具としてそれを渡そうとリアクト：

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

そして、この子コンポーネントは次のようになります。

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

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

このエラーが発生します：

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`. 

この問題を回避するにはどうすればよいですか？ ReactコンポーネントでJSONオブジェクトを簡単に使用する方法はありますか？

は、今私は、配列内のJSONオブジェクトをラップしようとした：

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

Answer 1

this.state.itemsが配列であるので、あなたがそのような配列内のすべてのアイテムをダンプすることはできません。あなたはjavascript配列のAPIを使用してアイテムを反復し、そのようにそれらを表示することができます。

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

あなただけにしてマップが動作しませんたびに単一のオブジェクトを取り戻すしているとあなたがして、オブジェクトを分割する必要がある場合

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

Answer 2

あなたはAppコンポーネントのrender()でリストを反復処理することができます。すべてを表示するためにプロパティ。また、それぞれのアイテムに対してReact.Component Itemを作成します。 Item.js

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

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