Verschachtelte React/Relay-Komponente, die keine Requisiten empfängt

Question

Ich versuche, ein Attribut in eine andere Komponente zu übergeben. Durchleiten des Arrays als <VideoList videos={this.props.channel.video_list}></VideoList> Ergebnisse in this.props.videos ein leeres Objekt ist durch:

{ 
    "videos": { 
    "__dataID__": "client:5610611954", 
    "__fragments__": { 
     "2::client": "client:5610611954" 
    } 
    } 
} 

(. GraphQL gibt die richtigen Daten, wie durch die Chrome-Erweiterung reagieren bestätigt, dann ist es einfach nicht in das VideoList geben wird)

Komponenten /video_list.js

import React from 'react' 
import Relay from 'react-relay' 
import VideoItem from '../containers/video_item'  

export default class VideoList extends React.Component { 
    render() { 
    return(
     <div> 
     { 
     this.props.videos.edges.map(video => 
      <VideoItem key={video.id} video={video.node}/> 
     ) 
     } 
     </div> 
    ) 
    } 
} 

Komponenten/channel_list.js

import React from 'react' 
import Relay from 'react-relay' 
import VideoList from './video_list' 

export default class ChannelView extends React.Component { 
    render() { 
    return(
     <div> 
     <Column small={24}> 
      <h2>{this.props.channel.title}</h2> 
     </Column> 

     <VideoList videos={this.props.channel.video_list}></VideoList> 
     </div> 


    ) 
    } 
} 

Container/channel_list.js

import React from 'react' 
import Relay from 'react-relay' 
import ChannelView from '../components/channel_view' 
import VideoList from './video_list' 

export default Relay.createContainer(ChannelView, { 
    fragments: { 
    channel:() => Relay.QL` 
     fragment on Channel { 
     title 
     video_list { 
      ${VideoList.getFragment('videos')} 
     } 
     }` 
    }, 
}); 

Container/video_list.js

import React from 'react' 
import Relay from 'react-relay' 
import VideoList from '../components/video_list' 
import VideoItem from './video_item' 

export default Relay.createContainer(VideoList, { 
    initialVariables: { 
    count: 28 
    }, 
    fragments: { 
    videos:() => Relay.QL` 
     fragment on Videos { 
     videos(first: $count) { 
      pageInfo { 
      hasPreviousPage 
      hasNextPage 
      } 
      edges { 
      node { 
       ${VideoItem.getFragment('video')} 
      } 
      } 
     } 
     }` 
    }, 
}); 

Was mache ich falsch? Missverstehe ich, wie Relay funktioniert? Ich möchte in der Lage sein, die count Relaisvariable in VideoList für Paginierungszwecke einzustellen. Das Objekt VideoList wird in mehreren anderen Komponenten verschachtelt (z. B. Kanal, beliebtesten, Favoriten des Benutzers, etc.)

Vielen Dank!

Answer 1

Sie versuchen, die Komponente VideoList direkt zu verwenden, ohne dass der Relaiscontainer sie umhüllt, und das ist falsch. Sie müssen die verpackte Version VideoList verwenden - die, die Sie in ./containers/video_list.js exportieren.

So:

import React from 'react' 
import Relay from 'react-relay' 
import VideoList from '../containers/video_list' 

export default class ChannelView extends React.Component { 
    render() { 
    return(
     <div> 
     <Column small={24}> 
      <h2>{this.props.channel.title}</h2> 
     </Column> 

     <VideoList videos={this.props.channel.video_list}></VideoList> 
     </div> 


    ) 
    } 
}