Meteor + React - 会话变量不具有反应性

Question

我是新来的社区,但我一直在寻找一周,看看我的问题是否得到了回答,但显然与流星1.4的反应并不多.

所以我正在构建一个应用程序(我是Meteor + React的新手),它读取存储在服务器上的一个巨大的XML文件,然后需要从中提取一些数据,显示它,然后启动一些其他函数不同的页面,所以我认为将解析为JSON对象的XML存储到会话变量中是一个好主意,但随后第一个简单数据提取不会反应性地立即出现问题.

这是代码:

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

所以我不确定我对系统的理解是否正确,但我想在这个简化版本的代码中做的是显示按钮或该会话变量的内容.

请注意,当我点击按钮后更改页面然后我回到同一页面时,内容会正确更新.

Answer 1

使用Meteor + React,所有响应式Meteor数据源(例如数据库收集find调用和Session.get)都需要在其中createContainer.所以你需要这样做:

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

然后你可以this.props.fightPlan在render函数中使用.

请注意,如果XML文件的内容在服务器上发生更改,则不会反应,这些更改不会反映在UI中.如果这是你想要的,我建议你在服务器上编写一个脚本,从XML中提取数据并将其写入Mongo数据库,以便Meteor像任何其他数据库数据一样使用.

按照Cod3Citrus的要求澄清

要理解为什么这是必要的,你必须明白React反应性和流星反应性是两回事.反应反应性起作用,以便当且仅当组件props或state组件发生变化时,其render功能将重新运行.流星反应性起作用,以便当在反应性上下文中调用的反应数据源(例如collection.find或)改变值时,重新运行该反应性上下文.流星反应上下文的示例是和传递给的数据函数.因此,将Reteor-reactive数据源()置于React-reactive 函数中将不起作用.Session.getTracker.autoruncreateContainerSession.getrender