ReactJS如何處理軌道活動記錄關聯

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

現在有了反應，我可以使用反應 - 鐵路這個寶石：

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中添加道具，但那不是我想要的。

似乎有在我的控制檯一個線索，我想弄清楚：

「警告：在數組或迭代每個孩子都應該有一個獨特的‘鑰匙’的道具檢查渲染方法。的帖子

Answer 1

我不認爲該警告有什麼做的問題，但只是爲了擺脫它，你可以像這樣在陣營組件添加的關鍵道具：

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

    } 
}); 

由於對於真正的問題，請嘗試更改將@posts分配到類似@posts = Post.all.includes(:user).as_json(include: { user: { only: [:name] } })

我的猜測是您只是查詢帖子。默認情況下，as_json（返回json數據時調用的方法）不包含關聯，因此在反應方面你不會得到任何東西。