问题描述
我有两个组件的类。首先是 TrackRoute1.js,我从中通过服务器将公交车位置参数和用户当前位置参数传递给类 dispaly.js。但是在显示后,我不断收到内存泄漏,表明它无法对卸载的组件执行反应状态更新。我尝试了一切。但这无济于事。
TrackRoute1.js
import React,{ Component } from "react";
import {
ActivityIndicator,FlatList,Text,View,TouchableHighlight,StyleSheet,} from "react-native";
import AnimatedRegion from "react-native-maps";
import display1 from "./display1";
import { LogBox } from "react-native";
import CustomHeader from "../CustomHeader";
LogBox.ignoreLogs(["Setting a timer"]);
import * as Location from 'expo-location';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],isLoading: true,userLat: 0,userLng: 0,routeCoordinates: [],distanceTravelled: 0,prevLatLng: {},coordinate: new AnimatedRegion({
userLat: 0,latitudeDelta: 0,longitudeDelta: 0
})
};
}
componentDidMount() {
this.interval = setInterval(() => this.getCoords(),1000);
this._getLocationAsync();
}
async getCoords() {
fetch("https://api.thingspeak.com/channels/1323137/Feeds.json?results=1")
.then((response) => response.json())
.then((json) => {
console.log(json.Feeds,"API res");
this.setState({ data: json.Feeds });
})
.catch((error) => console.error(error))
.finally(() => {
this.setState({ isLoading: false });
});
}
_getLocationAsync = async () => {
console.log("123")
let { status } = await Location.requestForegroundPermissionsAsync();
console.log(status)
if (status !== 'granted') {
console.log('Permission to access location was denied');
return;
}
// Old method //
let location = await Location.getCurrentPositionAsync({});
console.log(location,"my location");
this.setState({
userLat: Number(location.coords.latitude),userLng: Number(location.coords.longitude)
})
console.log(this.state.userLng,"userLng111")
// New Method //
// this.location = await Location.watchPositionAsync(
// {
// enableHighAccuracy: true,// distanceInterval: 1,// timeInterval: 1000
// },// newLocation => {
// let { coords } = newLocation;
// // console.log(coords);
// this.setState({
// userLat: Number(coords.latitude),// userLng: Number(coords.longitude)
// })
// },// error => console.log(error)
// );
// return this.location;
};
calcdistance = newLatLng => {
const { prevLatLng } = this.state;
return haversine(prevLatLng,newLatLng) || 0;
};
componentwillUnmount() {
clearInterval(this.interval);
navigator.geolocation.clearWatch(this.watchID);
}
render() {
const { data,isLoading } = this.state;
return (
<View style={{ flex: 1,width: "100%" }}>
<CustomHeader title="Track Route" navigation={this.props.navigation} />
{isLoading ? (
<ActivityIndicator />
) : (
<FlatList
data={data}
keyExtractor={(id,index) => index.toString()}
renderItem={({ item }) => (
<display1
value1={item.field1}
value2={item.field2}
value3={item.field3}
value4={this.state.userLat}
value5={this.state.userLng}
/>
)}
/>
)}
</View>
);
}
}
const styles = StyleSheet.create({
appButtonText: {
fontSize: 18,color: "#fff",fontWeight: "bold",alignSelf: "center",textTransform: "uppercase",},});
dispaly.js
import React,{ Component } from "react";
import {
StyleSheet,TouchableOpacity,Platform,Dimensions,Image,} from "react-native";
import * as Location from 'expo-location';
import MapView,{
PROVIDER_GOOGLE,Marker,polyline,AnimatedRegion,} from "react-native-maps";
import AutoScrolling from "react-native-auto-scrolling";
import { getPrecisedistance } from 'geolib';
const { width,height } = Dimensions.get("window");
export default class Map extends Component {
// constructor(props) {
// super(props);
// this.state = {
// };
// }
constructor(props) {
super(props);
this.marker = null;
this.timeout = null;
this.state = {
isMapReady: false,Time:0,dis: 0,hasLocationPermissions: false,locationResult: null,coordinate: new AnimatedRegion({
latitude: parseFloat(this.props.value1),longitude: parseFloat(this.props.value2),latitudeDelta: 0.05,longitudeDelta: 0.04,}),};
}
async componentDidMount() {
this.mounted = true;
this.timeout = setTimeout(()=>{ var pdis = getPrecisedistance(
{latitude:parseFloat(this.props.value1),longitude: parseFloat(this.props.value2)},{latitude: parseFloat(this.props.value4),longitude: parseFloat(this.props.value5)},);
// console.log(
// `Precise distance\n\n${pdis} Meter\nor\n${pdis / 1000} KM`
// );
this.setState({dis:pdis,Time:Math.round( pdis/(this.props.value3*1000) )})},2000)
this.setState({
Time:this.state.Time.toFixed(2)
})
}
componentwillUnmount = () =>{
this.mounted = false;
if (this.timeout) {
clearTimeout(this.timeout)
}
}
onMapLayout = () => {
this.setState({ isMapReady: true });
};
render() {
// console.log( this.state.userLat,// this.state.userLng,"myConsole")
return (
<View>
{this.state.dis !== 0 ?
<View style={{backgroundColor:"rgba(52,52,0.00006)"}}>
<Text style={{ color: "green",marginTop: 10,marginBottom: 3,}}>Bus is {this.state.dis / 1000} km Away.</Text>
<AutoScrolling style={{ backgroundColor: "rgba(52,0.00006)",width: 400,padding: 10,marginBottom: 10,}} endPadding={50}>
<Text style={ {
color: "red",fontSize: 20,textAlign: "center",margin: 5,}}>Bus is Coming in {this.state.Time} Minutes</Text>
</AutoScrolling>
</View>
:null }
<MapView
initialRegion={{
latitude: parseFloat(this.props.value1),latitudeDelta: 0.02,longitudeDelta: 0.01,}}
onMapReady={this.onMapLayout}
provider={PROVIDER_GOOGLE}
loadingIndicatorColor="#e21d1d"
ref={(map) => (this.map = map)}
style={{
width,height
}}
loadingEnabled={true}
>
{this.state.isMapReady && (
<MapView.Marker
key="AIzaSyB8k3Irk81q1k8pbj5tPM33KRWNdtROoOg"
identifier="marker"
coordinate={{
latitude: parseFloat(this.props.value1),}}
flat={false}
title="Route 1"
description = "Driver: Muhammad Murtaza"
>
<Image source={require("D:/React Native apps/Bus-Track1-main/assets/car-marker.png")} style={{ width: 60,height: 50 }}/>
</MapView.Marker>
)}
<MapView.Marker
key="AIzaSyArnXt8Xqydc3BF9Udt8JCkFuKqgPR_HM0"
identifier="marker1"
coordinate={{
latitude: parseFloat(this.props.value4),longitude: parseFloat(this.props.value5)
}}
title="My Location"
/>
<polyline
coordinates={[
{ latitude: parseFloat(this.props.value4),longitude: parseFloat(this.props.value5)
},{ latitude: parseFloat(this.props.value1),longitude: parseFloat(this.props.value2)
},]}
strokeColor="red"
strokeColors={[
'#238C23','red'
]}
strokeWidth={5}
/>
</MapView>
</View>
);
}
}
我有两个组件的类。首先是 TrackRoute1.js,我从中通过服务器将公交车位置参数和用户当前位置参数传递给类 dispaly.js。但是在显示后,我不断收到内存泄漏,表明它无法对未安装的组件执行反应状态更新。我尝试了一切。但这无济于事。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)