session - meteor + React- session 变量没有反应

我是该社区的新手，但我一直在该社区上搜索一个星期，以查看我的问题是否曾经得到回答，但显然与反应的 meteor 1.4无关。

因此，我正在构建一个应用程序(我是Meteor + React的新手)，该应用程序读取存储在服务器上的巨大XML文件，然后需要从中提取一些数据，进行显示，然后使用获取的数据启动其他一些功能。在不同的页面上，所以我认为将解析为JSON对象的XML存储到 session 变量中是个好主意，但是由于第一个简单的数据提取没有反应性，因此立即开始出现问题。

这是代码:

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

因此，我不确定我对系统的理解是否正确，但是在此简化版本的代码中，我想显示的是按钮还是该 session 变量的内容。

请注意，单击按钮后更改页面，然后返回同一页面时，内容将正确更新。

最佳答案

使用Meteor + React，所有反应式Meteor数据源(例如DB集合find调用和Session.get)都必须位于createContainer内。因此，您需要这样做:

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

然后，您可以在render函数中使用this.props.fightPlan。

请注意，这在某种意义上不是被动的，如果您的XML文件的内容在服务器上更改，则更改不会反映在UI中。如果这是您想要的，我建议您在服务器上编写一个脚本，该脚本从XML提取数据并将其写入Mongo数据库，以便Meteor像其他任何DB数据一样使用。

根据Cod3Citrus的要求进行澄清

要了解为什么这样做是必要的，您必须了解React反应性和Meteor反应性是两件事。 React反应性的工作原理是，仅当组件的props或state更改时，它的render函数才重新运行。 meteor 反应性的工作原理是，当在反应性上下文中调用的反应性数据源(例如collection.find或Session.get)更改值时，将重新运行此反应性上下文。 meteor 反应上下文的示例是Tracker.autorun和传递给createContainer的数据函数。因此，将Meteor反应性数据源(Session.get)放置在React-active render函数中将不会起作用。