反应新的用磁带重新订阅反复订阅曾经不必要地第二

Question

下面的屏幕/组件工作正常，但是console.log语句（在withtracker部分内的文件结束）每秒重复（永远），表明订阅已重新播放无缘无故 - 我知道数据没有在服务器/DB上更改，因为我是登录应用程序的唯一用户。

import React, { Component } from "react";
import { View, Text } from "react-native";
import { Button } from "native-base";
import Meteor, { withTracker } from "react-native-meteor";
import moment from "moment";
import LoadingScreen from "../components/LoadingScreen";
class JobDetailsScreen extends Component {
  constructor(props) {
    super(props);
    posterInfo = this.props.navigation.state.params.posterInfo;
    this.state = {
      posterUsername: posterInfo.firstName + " " + posterInfo.surname.charAt(0),
      posterProfilePicUrl: posterInfo.profilePicUrl
    };
  }
  render() {
    if (!this.props.myShiftRequestReady) {
      return <LoadingScreen />;
    }
    const job = this.props.job;
    return (
      <View>
        <H3>{job.type + ": $" + job.ratePerHour + "/hr"}</H3>
        <Image source={{uri: this.state.posterProfilePicUrl}}/>
        <Text>
          {this.state.posterUsername + moment(job.datePosted).fromNow()}
        </Text>
        <Text>{job.location}</Text>
        <Text>
          {moment(job.start).fromNow()
            + moment(job.end).from(moment(job.start), true)}
        </Text>
        <Text> {moment(job.start).format("DD/MM/YY h:mm a")
          + moment(job.end).format("DD/MM/YY h:mm a")} </Text>
        <Text>{job.summary}</Text>
        <Button
          onPress={() => {
            if (!this.props.myShiftRequest) {
              Meteor.call("ShiftRequests.add", job, (err, res) => {});
              return;
            }
            if (!this.props.myShiftRequest.accepted) {
              Meteor.call("ShiftRequests.remove", job._id, (err, res) => {});
            }
          }}
        >
          <Text>
            {!this.props.myShiftRequest
              ? "Request shift"
              : !this.props.myShiftRequest.accepted
                ? "Cancel Request"
                : this.props.myShiftRequest.didNotTurnUp
                  ? "You did not turn up for this shift"
                  : job.finshed
                    ? "Rate employer"
                    : "Shift in progress"}
          </Text>
        </Button>     
      </View>
    );
  }
}
const container = withTracker(params => {
  const jobId = params.navigation.state.params.jobId;
  const srHandle = Meteor.subscribe("myShiftRequestForJob", jobId);
  console.log("subscribing myShiftRequestForJob with jobId " + jobId);
  return {
    myShiftRequestReady: srHandle.ready(),
    myShiftRequest: Meteor.collection("shift_requests").findOne({
      userId: Meteor.userId(),
      jobId: jobId
    }),
    job: Meteor.collection("jobs").findOne({ _id: jobId })
  };
})(JobDetailsScreen);
export default container;

Answer 1

我最终将订阅移出withTracker。实际上 - 我认为https://github.com/inprogress-team/reaeact-native-meteor的文档示例在演示此方法时是错误的，因为它可能会导致订阅的无限循环：

1. 订阅的数据更改，导致withtracker代码重新运行
2. 但是在WithTracker内部，我们再次订阅！这会导致反应性值（潜在）变化
3. 在后台无限循环，咀嚼网络和内存和CPU资源

正确的方法是订阅componentDidmount（）中的数据，如本文所建议：https：//daveceddia.com/where-fetch-fetch-data-componentwillmount-willmount-vs-vs-componentdidmount/

修改的代码：

import React, { Component } from "react";
import { View } from "react-native";
import Meteor, { withTracker } from "react-native-meteor";
import LoadingScreen from "../components/LoadingScreen";
class JobDetailsScreen extends Component {
  constructor(props) {
    super(props);
    posterInfo = this.props.navigation.state.params.posterInfo;
    this.state = {
      posterUsername: posterInfo.firstName + " " + posterInfo.surname.charAt(0),
      posterProfilePicUrl: posterInfo.profilePicUrl
    };
  }
  render() {
    if (!this.props.myShiftRequest || !this.props.job) {
      return <LoadingScreen />;
    }
    return (
      <View>
       ...
       <ComponentToDisplay/>
       ...
      </View>
    );
  }
  componentDidMount() {
    const jobId = this.props.navigation.state.params.jobId;
    const srHandle = Meteor.subscribe("myShiftRequestForJob", jobId);
    __DEV__
      ? console.log("subscribing myShiftRequestForJob with jobId " + jobId)
      : null;
  }
}
const container = withTracker(params => {
  const jobId = params.navigation.state.params.jobId;
  return {
    myShiftRequest: Meteor.collection("shift_requests").findOne({
      userId: Meteor.userId(),
      jobId: jobId
    }),
    job: Meteor.collection("jobs").findOne({ _id: jobId })
  };
})(JobDetailsScreen);
container.navigationOptions = {
  title: "Shift details"
};
export default container;