2016-10-28 4 views
0

リアクターコンポーザーを使用してデータをロードしようとしていますが、私は何が間違っているのか分かりません。しかし、私はUIでデータを取得していません。ヘルプにリアクターコンポーザーを使用したデータの読み込み

container.js

import { composeWithTracker } from 'react-komposer'; 
import RightNavBar from './right-nav-bar.jsx'; 

function composer(props, onData) { 
    const subscription = Meteor.subscribe('currentUser'); 
    const currentUser = 'bbbb'; 
    onData(null, currentUser); 
} 
export default composeWithTracker(composer)(RightNavBar); 

ここ

export class RightNavBar extends React.Component { 
    render() { 
     return (
      <div> 
       aaaa {currentUser} 
      </div> 
     ); 
    } 
} 
+0

そして 'currentUser'が文字列ではなくオブジェクトであった場合はどうでしょうか? –

+0

あなたはそれを働かせましたか? – MasterAM

+0

私は、私はそれに答える必要がありました。問題はインポートが正しくないためです –

答えて

0

react-komposer's repositoryから "標準" の例がある私のコンポーネントを使用することができます

function composer(props, onData) { 
    const subscription = Meteor.subscribe('currentUser'); 
    if (subscription.ready()) { 
    const currentUser = Meteor.user(); //or whatever 
    onData(null, {currentUser}); 
    }; 
}; 

(あなたの特定のケースに適応)ここで購読し、購読が準備できたらコンポーネントがレンダリングされます。それ以外の場合は、loadingコンポーネントがレンダリングされます。

onDataの2番目のパラメータはオブジェクトである必要があります。コンポーネントに渡された他のpropsとマージされ、コンポーネント内からthis.props経由でアクセスできます。

propsオブジェクトはthis.propsで利用可能ですので、そのオブジェクトを分解するか、そのプロパティに直接アクセスすることができます。

class RightNavBar extends React.Component { 
    render() { 
    const {currentUser} = this.props; 
    return (
     <div> 
     Hello, {currentUser.name}! 
     </div> 
    ); 
    } 
} 

あなたのコードは、文字列ではなくオブジェクトを送信して反応コンポーネント内からトークンcurrentUserの感覚を作成する方法がありません。

+0

これをテストしてconsole.log(currentUser)を追加しました。 constの直後ですが、定義されていません –

+0

コンポーネントに何を渡していますか?必要なデータを取得するクエリを追加する必要があります。ユーザがログインしていない場合、 'Meteor.user()'は明らかに 'undefined'になります。 – MasterAM

+0

ユーザーはログインしていますが、私もconst currentUser = {data: 'test'}のようにテストしました。まだ定義されていません。データはコンポーネントに渡されません。コンポーネントが別のコンポーネントの内部に埋め込まれている場合に問題がありますか?私はnavコンポーネントと右のnav barコンポーネントを残しているヘッダコンポーネントを持っています –

関連する問題