反应-本机流星withTracker重复订阅的第二次不必要。

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/react-native-meteor的文档示例演示这个方法是错误的，因为它会导致无限循环的订阅：

1. 订阅数据更改，导致withTracker代码重新运行
2. 但是在withTracker内部，我们又重新订阅了！，这将导致反应性值的更改(可能)。
3. 在后台无限循环，咀嚼网络、内存和CPU资源。

正确的方法是订阅componentDidMount()中的数据，如本文所建议的：https://daveceddia.com/where-fetch-data-componentwillmount-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;