getCurrentPosition 中的 React-native-maps setState 不适用于我的 url API
React-native-maps setState in getCurrentPosition does not work for my url API
我正在研究状态的生命周期。我是全球 React-native 和 React 的新手。
我正在尝试在地图上显示来自 GooglePlacesAPI 的 标记,但我的 API 的 URL 是 无效。当我记录这个 URL 时,纬度和经度似乎是 'null'.
首先,我尝试在我设置状态 "lat" 和 "lng" 的 componentDidMount() 中实现函数 getCurrentPosition,然后,我的 axios 函数使用 URL,但是我的状态是空的。
所以接下来,我尝试使用回调函数。但我收到一个错误:“[未处理的承诺拒绝:TypeError:无法读取未定义的 属性 'setState']”
这是我的代码:
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import MapView from 'react-native-maps';
import axios from 'axios';
var API_KEY= '###################';
var GOOGLE_PLACES_URL = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json';
class MapScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isloading: null,
lat: null,
lng: null,
error:null,
markers: [],
};
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position);
this.setState({
lat: position.coords.latitude,
lng: position.coords.longitude,
error: null,
}, () => {
getMarkers(this.state.lat, this.state.lng)
});
},(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
);
// My first try was to put the axios.get(url) here.
}
function getMarkers(lat, lng){
const url =
`${GOOGLE_PLACES_URL}?location=${lat},${lng}&radius=1500&keyword=grow+shop&key=${API_KEY}`;
axios.get(url)
.then(res =>
res.data.results.map(marker => ({
latitude: `${marker.geometry.location.latitude}`,
longitude: `${marker.geometry.location.longitude}`,
name: `${marker.name}`,
isOpen: `${marker.opening_hours.open_now}`,
adress: `${marker.vicinity}`
})))
.then(markers => {
console.log(url)
console.log(markers)
this.setState({
markers,
isloading: false
})
})
.catch(error => this.setState({error, isloading: true}));
}
render() {
const { markers, lat, lng } = this.state
return (
this.state.lat !== null && <MapView style={styles.map} initialRegion={{
latitude:this.state.lat,
longitude:this.state.lng,
latitudeDelta: 1,
longitudeDelta: 1,
}}
showsUserLocation= {true}>
{markers.map(marker => {
return (<MapView.Marker
coordinate = {{
latitude:this.state.lat,
longitude:this.state.lng
}}/>)
})}
</MapView>
)}
}
export default MapScreen;
当我在 'getCurrentPosition' 中登录 'Position' 时:
Object {
"coords": Object {
"accuracy": 65,
"altitude": 11.887725830078125,
"altitudeAccuracy": 10,
"heading": -1,
"latitude": 44.83189806318307,
"longitude": -0.5747879551813496,
"speed": -1,
},
"timestamp": 1589450273414.4202,
}
地图正常工作,因为初始区域以我的位置为中心。
也许我应该创建文件 'utils/getCurrentPosition' 以便我可以使用 React Context 来设置纬度和经度的用户?
我听说 getCurrentPosition 是 'async',我认为正是因为这个原因,我的第一次尝试失败了。
编辑:最后我从 APi 中检索到预期结果,所以我的回调函数正在工作,我只需要弄清楚如何用数据填充我的状态 'markers'。当一切正常时,我将 post 我的代码。
所以现在一切正常。
回调函数非常适合这类问题。
这是我解决它的代码:
class MapScreen extends React.Component {
constructor(props) {
super(props);
this.getMarkers = this.getMarkers.bind(this);
this.state = {
isloading: true,
lat: null,
lng: null,
error:null,
markers: [],
};
}
getMarkers(lat, lng){
const url = `${GOOGLE_PLACES_URL}?location=${lat},${lng}&radius=1500&keyword=grow+shop&key=${API_KEY}`;
fetch(url)
.then(res => res.json())
.then((data) => {
this.setState({ markers: data.results });
})
.catch(error => this.setState({error, isloading: true}));
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position);
this.setState({
lat: position.coords.latitude,
lng: position.coords.longitude,
error: null }, () => {
this.getMarkers(this.state.lat, this.state.lng);
});
},(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 200, maximumAge: 1000 },
);
}
render() {
const { markers } = this.state
return (
this.state.lat !== null && <MapView style={styles.map} initialRegion={{
latitude:this.state.lat,
longitude:this.state.lng,
latitudeDelta: 1,
longitudeDelta: 1,
}}
showsUserLocation= {true}
>
{this.state.markers !== null && this.state.markers.map(marker => (
<MapView.Marker
coordinate = {{
latitude:marker.geometry.location.lat,
longitude:marker.geometry.location.lng
}}>
</MapView.Marker>
))}
</MapView>
)}
}
我没有很好地处理 JSON 的回复。
现在我知道了。我只需要将 'Key prop' 归因于每个道具就可以了。
我正在研究状态的生命周期。我是全球 React-native 和 React 的新手。
我正在尝试在地图上显示来自 GooglePlacesAPI 的 标记,但我的 API 的 URL 是 无效。当我记录这个 URL 时,纬度和经度似乎是 'null'.
首先,我尝试在我设置状态 "lat" 和 "lng" 的 componentDidMount() 中实现函数 getCurrentPosition,然后,我的 axios 函数使用 URL,但是我的状态是空的。
所以接下来,我尝试使用回调函数。但我收到一个错误:“[未处理的承诺拒绝:TypeError:无法读取未定义的 属性 'setState']”
这是我的代码:
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import MapView from 'react-native-maps';
import axios from 'axios';
var API_KEY= '###################';
var GOOGLE_PLACES_URL = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json';
class MapScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isloading: null,
lat: null,
lng: null,
error:null,
markers: [],
};
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position);
this.setState({
lat: position.coords.latitude,
lng: position.coords.longitude,
error: null,
}, () => {
getMarkers(this.state.lat, this.state.lng)
});
},(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
);
// My first try was to put the axios.get(url) here.
}
function getMarkers(lat, lng){
const url =
`${GOOGLE_PLACES_URL}?location=${lat},${lng}&radius=1500&keyword=grow+shop&key=${API_KEY}`;
axios.get(url)
.then(res =>
res.data.results.map(marker => ({
latitude: `${marker.geometry.location.latitude}`,
longitude: `${marker.geometry.location.longitude}`,
name: `${marker.name}`,
isOpen: `${marker.opening_hours.open_now}`,
adress: `${marker.vicinity}`
})))
.then(markers => {
console.log(url)
console.log(markers)
this.setState({
markers,
isloading: false
})
})
.catch(error => this.setState({error, isloading: true}));
}
render() {
const { markers, lat, lng } = this.state
return (
this.state.lat !== null && <MapView style={styles.map} initialRegion={{
latitude:this.state.lat,
longitude:this.state.lng,
latitudeDelta: 1,
longitudeDelta: 1,
}}
showsUserLocation= {true}>
{markers.map(marker => {
return (<MapView.Marker
coordinate = {{
latitude:this.state.lat,
longitude:this.state.lng
}}/>)
})}
</MapView>
)}
}
export default MapScreen;
当我在 'getCurrentPosition' 中登录 'Position' 时:
Object {
"coords": Object {
"accuracy": 65,
"altitude": 11.887725830078125,
"altitudeAccuracy": 10,
"heading": -1,
"latitude": 44.83189806318307,
"longitude": -0.5747879551813496,
"speed": -1,
},
"timestamp": 1589450273414.4202,
}
地图正常工作,因为初始区域以我的位置为中心。
也许我应该创建文件 'utils/getCurrentPosition' 以便我可以使用 React Context 来设置纬度和经度的用户?
我听说 getCurrentPosition 是 'async',我认为正是因为这个原因,我的第一次尝试失败了。
编辑:最后我从 APi 中检索到预期结果,所以我的回调函数正在工作,我只需要弄清楚如何用数据填充我的状态 'markers'。当一切正常时,我将 post 我的代码。
所以现在一切正常。
回调函数非常适合这类问题。
这是我解决它的代码:
class MapScreen extends React.Component {
constructor(props) {
super(props);
this.getMarkers = this.getMarkers.bind(this);
this.state = {
isloading: true,
lat: null,
lng: null,
error:null,
markers: [],
};
}
getMarkers(lat, lng){
const url = `${GOOGLE_PLACES_URL}?location=${lat},${lng}&radius=1500&keyword=grow+shop&key=${API_KEY}`;
fetch(url)
.then(res => res.json())
.then((data) => {
this.setState({ markers: data.results });
})
.catch(error => this.setState({error, isloading: true}));
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position);
this.setState({
lat: position.coords.latitude,
lng: position.coords.longitude,
error: null }, () => {
this.getMarkers(this.state.lat, this.state.lng);
});
},(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 200, maximumAge: 1000 },
);
}
render() {
const { markers } = this.state
return (
this.state.lat !== null && <MapView style={styles.map} initialRegion={{
latitude:this.state.lat,
longitude:this.state.lng,
latitudeDelta: 1,
longitudeDelta: 1,
}}
showsUserLocation= {true}
>
{this.state.markers !== null && this.state.markers.map(marker => (
<MapView.Marker
coordinate = {{
latitude:marker.geometry.location.lat,
longitude:marker.geometry.location.lng
}}>
</MapView.Marker>
))}
</MapView>
)}
}
我没有很好地处理 JSON 的回复。
现在我知道了。我只需要将 'Key prop' 归因于每个道具就可以了。