2016-08-06 67 views
2

私はコミュニティに新人ですが、私の質問が以前に答えられたかどうかを調べるために1週間は探し続けましたが、Meteor + React - セッション変数が反応的に反応しない

私は、巨大なXMLファイルをサーバーに保存して読み込み、そこからいくつかのデータを抽出して表示し、次に他の機能を起動する必要のあるアプリケーション(Meteor + Reactの新機能)を構築していますこれは別のページのデータを取得したので、このXMLをJSONオブジェクトにセッション変数に格納することをお勧めしますが、最初の単純なデータ抽出が反応的に動作しないため、すぐに問題が発生しました。

これはコードです:

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Meteor } from 'meteor/meteor'; 
import { createContainer } from 'meteor/react-meteor-data'; 

FlightPlan = new Mongo.Collection("flightPlan"); 

export default class FlightPlanWrapper extends Component { 
    constructor(props) { 
    super(props); 
    } 

    xmlDemo(){ 
    Meteor.call('xmlDemo',function(error,flightPlanXML){ 
     let tempXML = flightPlanXML; 
     Session.set({ 
     'flightPlanXML': flightPlanXML 
     }); 
    }); 
    } 

    render() { 
    const flightNumber = Session.get('flightPlanXML') ? (
     <span className="flightNumber">{Session.get('flightPlanXML').FlightPlan.FlightInfo.aTCCallsign}</span> 
    ) : ''; 

    return (
     <div id='flightPlan' className='contentWrapper'> 
     <h2> 
      Flight Plan 
     </h2> 

     { 
      Session.get('flightPlanXML') ? flightNumber : 
      <div> 
       <button onClick={this.xmlDemo.bind(this)}>click me</button> 
      </div> 
     } 
     </div> 
    ); 
    } 
} 

export default createContainer (() => { 
    Meteor.subscribe('flightPlan'); 
    return { 
    'resolutions': FlightPlan.find().fetch() 
    }; 
}, FlightPlanWrapper); 

だから私はシステムの私の理解は全く正しいかどうかはわからないが、私はこのコードの簡略版でやりたいことのいずれかの表示にありますボタンまたはそのセッション変数の内容

ボタンをクリックした後にページを変更した後、同じページに戻ったときにコンテンツが正しく更新されることにご注意ください。

+0

更新:(FlightPlanContent.jsx)という名前のファイルとFlightPlanForm.jsxという別のファイルのボタンに出力されるフライト番号のコードを分割しようとしました。
次に、この方法で(FlightPlanWrapper.jsx)のレンダリングを行います。 '{Session.get( 'flightPlanXML')? } ' でも結果は同じです。出力は反応しないので、ページを変更した後に変更されます(リフレッシュではありません)。セッション変数をダンプするので)。 – Fabio

答えて

10

Meteor + Reactでは、すべてのリアクティブメテオデータソース(DBコレクションfindコールとSession.getなど)はcreateContainerの範囲内にある必要があります。だから、これを実行する必要があります。

export default createContainer (() => { 
    Meteor.subscribe('flightPlan'); 
    return { 
    'resolutions': FlightPlan.find().fetch(), 
    flightPlan: Session.get('flightPlanXML') 
    }; 
}, FlightPlanWrapper); 

次にあなたがレンダリング関数内からthis.props.fightPlanを使用することができます。

XMLファイルの内容がサーバー上で変更された場合、その変更はUIに反映されないという意味では反応しません。これが必要な場合は、XMLからデータを抽出し、Mongoデータベースに書き込んでMeteorが他のDBデータと同様に使用できるようにするスクリプトをサーバーに書き込むことをお勧めします。これが必要な理由を理解するにはCod3Citrus

によって要求されるように、あなたが反応し、流星の反応性を反応することを理解しなければならない

明確化は、二つの異なるものです。反応反応性は、成分のpropsまたはstateが変化したときに、そのrender機能が再実行されるように作用する。流行反応性が働くので、反応性コンテキストのような反応性データソース(collection.findまたはSession.get)が反応性コンテキスト内でと呼ばれ、値が変更されると、この反応性コンテキストが再実行されます。流星反応性文脈の例はTracker.autorunであり、データ関数はcreateContainerに渡されている。したがって、反応反応性render機能内に流星反応性データソース(Session.get)を置くと、は機能しません。

+0

ありがとう!私はそれを試して結果を更新します – Fabio

+0

これは私のために働いた。 @ワイスキー、これがなぜ必要なのか説明できますか? – Cod3Citrus

+1

@ Cod3Citrus私は小さな解明で答えを更新しました。私はそれをクリアすることを願っ:) – Waiski

関連する問題