React Native只能更新安装或安装组件

Question

我正在使用React Native V0.51。当我再次在第二页中导航到组件时，我会遇到此错误。

can only update a mounted or mounting component. 

我找到了发生的地方，但我不明白为什么。

    /*
 * Default Android example
 */
'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Navigator,
  TouchableOpacity,
  Linking,
  View,
  Image,
  Geolocation   
} from 'react-native';
// third party library
import QRCodeScanner from 'react-native-qrcode-scanner';
import I18n from '../../i18n'
import branch from 'react-native-branch'
// import styles
import { style } from './style';
const { centerText, textBold, buttonTouchable, camera, topViewStyleQR, QRcontainer, customMarkerStyle, imageScanStyle, textScanStyle, sloganScan, viewSlogan, buttonText } = style;
class QrScan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      barcodeText: '',
      scan: {
        glassHash: '',
        latitude: 0,
        longitude: 0,
        isReedeemScan: true,
      },
    }
  }
  componentDidMount() {
    this._unsubscribeFromBranch = branch.subscribe(({ error, params }) => {
      if (error) {
        console.error("Error from Branch: " + error)
        return
      }
      console.log("Branch params: " + JSON.stringify(params))
      if (params) {

      }
      // if (!params['+clicked_branch_link']) return
      // // Get title and url for route
      // let title = params.$og_title
      // let url = params.$canonical_url
      // let image = params.$og_image_url
      // // Now push the view for this URL
      // this.navigator.push({ title: title, url: url, image: image })
    })
  }
  componentWillUnmount() {
    if (this._unsubscribeFromBranch) {
      this._unsubscribeFromBranch()
      this._unsubscribeFromBranch = null
    }
  }
  _getCurrentPosition(){
    navigator.geolocation.getCurrentPosition(
      (position) => {
         const initialPosition = JSON.stringify(position);
         console.log(initialPosition)
         //this.setState({ initialPosition });
      },
      (error) => alert(error.message),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
   );
   this.watchID = navigator.geolocation.watchPosition((position) => {
      const lastPosition = JSON.stringify(position);
     this.setState({scan:{...this.state.scan,latitude:position.latitude,longitude:position.longitude}})

   });
  }
  onSuccess(e) {
    this._getCurrentPosition();

    // Linking
    //   .openURL(e.data)
    //   .catch(err => console.error('An error occured', err));
    this.setState({ barcodeText: e.data });
    console.log(e);
  }
  _renderMaker() {
    return (
      <View style={customMarkerStyle}>
        <Image
          style={imageScanStyle}
          source={require('../../assets/images/iconScanP.png')} />
        <Text style={textScanStyle}>{I18n.t('_scanDrink')}</Text>
        <View style={viewSlogan}>
          <Text style={sloganScan}>SCANDIT</Text>
        </View>
      </View>
    )
  }
  render() {
    return (
      <QRCodeScanner
        onRead={this.onSuccess.bind(this)}
        showMarker={true}
        camType='front'
        topViewStyle={topViewStyleQR}
        containerStyle={QRcontainer}
        cameraStyle={camera}
        customMarker={this._renderMaker()}
        bottomContent={(
          <TouchableOpacity style={buttonTouchable}>
            <Text style={buttonText}>{this.state.barcodeText ? this.state.barcodeText : ''}</Text>
          </TouchableOpacity>
        )}
      />
    );
  }
}


export default QrScan;

当我将此行评论到函数_getCurrentPosition时，它没有发生，并且没有此问题。

     // this.setState({scan:{...this.state.scan,latitude:position.latitude,longitude:position.longitude}})

我在这条线上做错了吗？我无法将状态更新到此功能的范围中，如果是，为什么？

Answer 1

在您的 componentWillunMount 中，还可以删除分配给Geolocation的回调，

componentWillUnmount() {
  // <---- other logics
  // Remove callbacks assigned to geolocation functions
  navigator.geolocation.clearWatch(watchID);
  navigator.geolocation.stopObserving()
}