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 中尝试删除分配给地理位置的回调，

componentWillUnmount() {
  // <---- other logics

  // Remove callbacks assigned to geolocation functions
  navigator.geolocation.clearWatch(watchID);
  navigator.geolocation.stopObserving()
}

本机反应只能更新已安装或安装的组件

1 个答案: