реагировать-родной-метеор с Tracker повторной подписки неоднократно когда-либо без необходимости - PullRequest
Новая
       13

реагировать-родной-метеор с Tracker повторной подписки неоднократно когда-либо без необходимости

0 голосов
/ 23 февраля 2019

Приведенный ниже экран / компонент работает нормально, однако оператор console.log (конец конца файла в разделе withTracker) повторяется каждую секунду (навсегда), указывая на то, что подписка перезапускается снова и снова без причины - я знаюданные не изменяются на сервере / БД, поскольку я единственный пользователь, вошедший в приложение. 

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;

1 Ответ

0 голосов
/ 26 февраля 2019

Я закончил тем, что удалил подписку из withTracker.на самом деле - я думаю, что пример документации на https://github.com/inProgress-team/react-native-meteor неверен при демонстрации этого метода, потому что он может вызвать бесконечный цикл подписок:

  1. изменения данных подписки, что вызывает повторный запуск кода withTracker
  2. но внутри withTracker мы подписываемся снова!что вызывает изменение реактивных значений (потенциально)
  3. бесконечный цикл в фоновом режиме, жевание сети и памяти и ресурсов процессора

Правильный метод - подписаться на данные в 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;
...