Could anybody help me understand why Meteor.status() isn’t reactive in this React component?
import React from 'react';
import ReactMixin from 'react-mixin';
import { ReactMeteorData } from 'meteor/react-meteor-data';
import { GlassCard } from '/imports/ui/components/GlassCard';
import { CardTitle, CardText } from 'react-toolbox/lib/card';
import TextField from 'material-ui/TextField';
import {orange500, blue500} from 'material-ui/styles/colors';
export class AppInfoPage extends React.Component {
constructor(props) {
super(props);
}
getMeteorData() {
let data = {
environment: process.env.NODE_ENV,
userId: Meteor.userId(),
url: Meteor.absoluteUrl(),
onlineStatus: Meteor.status().status
};
return data;
}
render(){
return(
<div id="appInfoPage">
<GlassCard>
<CardTitle
title="App Info"
/>
<CardText>
<TextField
id="appUrl"
defaultValue={this.data.url}
errorText="Universal Resource Location"
errorStyle={styles.errorStyle}
/><br />
<TextField
id="appEnvironment"
defaultValue={this.data.environment}
errorText="Environment"
errorStyle={styles.errorStyle}
/><br />
<TextField
id="appUserId"
defaultValue={this.data.userId}
errorText="User ID"
errorStyle={styles.errorStyle}
/><br />
<TextField
id="appOnlineStatus"
defaultValue={this.data.onlineStatus}
errorText="Connection"
errorStyle={styles.errorStyle}
/><br />
</CardText>
</GlassCard>
</div>
);
}
}
ReactMixin(AppInfoPage.prototype, ReactMeteorData);
The UI renders before the livedata connection gets established, and then doesn’t refresh once the connection is established. I would have thought that, as a reactive data source, Meteor.status() would trigger getMeteorData() to refresh the React render tree.
Instead, it’s just stuck on ‘connecting’.
