In che modo ReactJS gestisce le associazioni dei record attivi delle guide

Question

Sto iterando sugli articoli di un utente. Posso elenca gli articoli, ma non il loro profilo in base alla mia relazione:

Messaggio Modello:

belongs_to :user 

Profilo Modello: Modello

belongs_to :user 

utente:

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 

Indice Pagina regolatore:

class PagesController < ApplicationController 

    respond_to :json 

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

Senza JS, ottengo i valori con:

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

Ora con Reagire, posso usare il reagiscono -rails gemma per questo:

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

pensavo di avere la risposta, ma questo solo sputa fuori da tutti gli utenti quando voglio solo l'utente con il post associato:

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

Quindi aggiungerei gli oggetti di scena nella js ma non è quello che voglio.

Sembra che ci siano un indizio nella mia console che sto cercando di capire:

"Attenzione: Ogni bambino in un array o iteratore dovrebbe avere un unico 'prop tasto' Verificare il metodo render . Messaggi di

Answer 1

non credo che l'avvertimento ha nulla a che fare con il problema, ma solo per sbarazzarsi di esso è possibile aggiungere il puntello chiave nel componente Reagire in questo modo:

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

    } 
}); 

come per il vero problema, per favore prova a cambiare l'assegnazione di @posts a qualcosa come @posts = Post.all.includes(:user).as_json(include: { user: { only: [:name] } })

La mia ipotesi è che si sta solo interrogando i post. Per impostazione predefinita, as_json (il metodo chiamato quando si restituiscono dati json) non include le associazioni, pertanto non si otterrà nulla dal lato della reazione.