我一直在网上搜索有关此错误的正确文档,我没有运气,因为我无法确定此错误的原因 .
这是我的整个代码:
First section: 设置状态
export default class Whereto extends Component<{}> {
constructor(props) {
super(props);
this.state = {
latitude: null,
longitude: null,
location: null,
error: null,
markers:[],
};
}
Second section 组件确实安装了
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
//geocode api
var myApiKey = '';
fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + position.coords.latitude + ',' + position.coords.longitude + '&key=' + myApiKey)
.then((response) => response.json())
.then((responseJson) => {
//console.log('ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson));
var locationName = responseJson.results[0].address_components.filter(x => x.types.filter(t => t === 'administrative_area_level_2').length > 0)[0].short_name;
//console.log(locationName);
this.setState({
location: locationName,
})
})
//nearby api
var apiPlaceskey = '';
//https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&keyword=cruise&key=YOUR_API_KEY
fetch('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=' + position.coords.latitude + ',' + position.coords.longitude + '&radius=2000&type=bus_station&key=' + apiPlaceskey)
.then((respplaces) => respplaces.json())
.then((responseJson2) => {
const markers = responseJson2.results.map((result) => ({
latlng: {
latitude: result.geometry.location.lat,
longitude: result.geometry.location.lng,
}
}));
this.setState({ markers });
});
},
(error) => this.setState({error: error.message}),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000},
);
}
Third section :在我的渲染和视图部分轻触可触摸按钮时保留的功能
fetchDirections = () => {
//directions api
var apiDirectionskey = '';
//const {location} = this.state;
const {latitude} = this.state;
const {longitude} = this.state;
fetch('https://maps.googleapis.com/maps/api/directions/json?origin=' + latitude + ',' + longitude + '&destination=' + goingto + '&mode=transit&transit_mode=bus&key=' + apiDirectionskey)
.then((resdirections) => resdirections.json())
.then((responseJson3) => {
console.log(responseJson3);
});
}
render(){
return(
<View style={styles.container}>
<Mainlogo/>
<TextInput style={styles.boxInput} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Going To?"
underlineColorAndroid='transparent'
onChangeText={(dest) => this.setState({goingto : dest})}
/>
<TouchableOpacity style={styles.button} onPress={this.fetchDirections.bind(this)}>
<Text style={styles.textButton}> Go {this.props.type}</Text>
</TouchableOpacity>
<MapView style={styles.map}
region={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.02,
longitudeDelta: 0.02
}}
>
</MapView>
<MapView.Marker
coordinate={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.02,
longitudeDelta: 0.02
}}
image={require('../img/my-pin-512.png')}
title={'you are here'}
/>
{this.state.markers.map(marker => (
<MapView.Marker
coordinate={marker.latlng}
image={require('../img/busstop.png')}
/>
))}
</View>
)
}
}
为了进入这个阶段,从我的主要 Profiles 页面中点击了一个touchableopacity . 我意识到我正在使用componentsndDidMount和一个单独的fetch函数来调用另一个API调用 . 它似乎没有足够的时间来篡改状态以产生空值
1 回答
将初始状态值设置为0而不是null .