ReactJSがどのようにしてRailsを処理しますか？Active Record Associations

Question

私はユーザーの投稿アイテムを繰り返しています。

ポストモデル：

belongs_to :user 

プロファイルモデル：

belongs_to :user 

ユーザーモデル：

私は私の関係に基づいてアイテムではなく、自分のプロフィールを示していますすることができます

has_many :posts 
has_one :profile 

PostsControllerの：

class PostsController < ApplicationController 
    respond_to :json 

    before_action :set_post, only: [:show, :edit, :update, :destroy] 
    before_action :only_current_user, except:[:show, :interest] 

    # GET /posts 
    # GET /posts.json 
    def index 
    @user = User.friendly.find(params[:user_id]) 
    end 
    [...] 
end 

インデックスページコントローラ：

class PagesController < ApplicationController 

    respond_to :json 

    def index 
     @users = User.all 
     @posts = Post.all.order("created_at DESC") 
    end 
    [...] 
end 

JSなしでは、私は値を取得：リアクトで

今

<% @posts.each do |s| %> 
<%= s.user.profile.business_name %> 
<%= s.post_type %> 
<%= s.<all others> %> 
<% end %> 

、私はが反応に使用することができます-rails宝石：

var Posts = React.createClass({ 

    render: function() { 

    var createItem = (p) => (

    <div className="row"> 
     {p.post_type} 
     {p.foobar} 
     {p.user.name} //this does not work 
    </div> 

    ); 

    return (
     <div className="panel"> 
     {this.props.posts.map(createItem)} 
     </div> 
    ); 

    } 
}); 

Index.html.erb：

<%= react_component('Posts', { posts: @posts } %> 

私は答えを持っていたと思ったが、私は唯一の関連する記事をユーザにしたいとき、これは単に、すべてのユーザーを吐き出す：

<%= react_component('Posts', { posts: @posts, 
           users: @users } %> 

私はjsに小道具を追加したいと思いますが、それは私が望むものではありません。

私が把握しようとしている私のコンソールでの手掛かりがあるように思える：

「警告：配列やイテレータ内の各子供は独特持つべきである 『キー』小道具をレンダリングする方法を確認してください

var Posts = React.createClass({ 

    render: function() { 

    var createItem = (p) => (

    <div className="row" key={p.id}> 
     {p.post_type} 
     {p.foobar} 
     {p.user.name} //this does not work 
    </div> 

    ); 

    return (
     <div className="panel"> 
     {this.props.posts.map(createItem)} 
     </div> 
    ); 

    } 
}); 

として：あなたは、このようなリアクトコンポーネントにキー小道具を追加することができます投稿

Answer 1

の私は、警告が問題とは何かを持っているとは思いませんが、ちょうどそれを取り除くために本当の問題については、changを試してみてください@postsの割り当てを@posts = Post.all.includes(:user).as_json(include: { user: { only: [:name] } })

とすると、私はあなたが投稿を照会するだけです。デフォルトでas_json（jsonデータを返すときに呼び出されるメソッド）には関連付けが含まれないため、反応側では何も取得しません。