Wie ReactJS behandelt Rails Active Record Associations

Question

Ich bin über die Post-Elemente eines Benutzers durchlaufen. Ich kann die Elemente aufgelistet, aber nicht ihr Profil auf der Grundlage meiner Beziehung:

Beitrag Modell:

belongs_to :user 

Profil Modell:

belongs_to :user 

Benutzermodell:

has_many :posts 
has_one :profile 

Posts:

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 

Index Seite Controller:

class PagesController < ApplicationController 

    respond_to :json 

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

Ohne JS, erhalte ich die Werte mit:

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

Jetzt mit Reaktion, kann ich die verwenden reagieren -Reifen Edelstein dafür:

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

Ich dachte, ich die Antwort hatte aber spuckt gerade aus allen Benutzern, wenn ich nur den Benutzer mit zugehörigem Beitrag mag:

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

Dann würde ich die Requisiten in der js hinzufügen, aber das ist nicht was ich will.

Es scheint ein Hinweis in meiner Konsole zu sein, den ich versuche, herauszufinden:

„Warnung: Jedes Kind in einem Array oder Iterator sollte eine eindeutige haben.‚Schlüssel‘prop Überprüfen der Methode machen . der Beiträge

Answer 1

glaube ich nicht, die Warnung nichts mit dem Thema zu tun hat, aber ich mag diese bekommen nur den Schlüssel Stütze in der Komponente Reagieren hinzufügen können Sie es los:

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

    } 
}); 

wie für das wirkliche Problem, bitte versuchen Sie chang in der Zuordnung von @posts zu etwas wie @posts = Post.all.includes(:user).as_json(include: { user: { only: [:name] } })

Meine Vermutung ist, dass Sie nur die Beiträge abfragen. Standardmäßig enthält as_json (die Methode, die beim Zurückgeben von JSON-Daten aufgerufen wird) keine Zuordnungen, daher erhalten Sie auf der reaktiven Seite nichts.