代码之家 › 专栏 › 技术社区 › Fabio

Meteor+React-会话变量没有反应

reactjs meteor session

Fabio · 技术社区 · 8 年前

我是新来的社区,但我一直在搜索一周,看看我的问题之前是否得到了回答,但显然没有太多与流星1.4有关。

这是代码:

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

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

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

1 回复 | 直到 8 年前

Waiski 7 年前

使用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要求的澄清

为了理解为什么这是必要的,你必须理解反应反应性和流星反应性是两个不同的东西。反应活性起作用,因此只有当 props 或 state 组件发生更改时,其 render 函数重新运行。流星反应性工作,因此当 无功数据源 例如 collection.find 或 会话.get ,称为 在被动环境中 更改值,则重新运行此反应上下文。Meteor反应上下文的示例有 Tracker.autorun 和传递给的数据函数 创建容器 因此 放置Meteor无功数据源( 会话.get )反应-反应内 提供 功能不起作用 .